Trying to write html help files that get included with our app on iOS.
For the iPad version, I want the help files to display a smallish graphic (about
156x204).
For iPhone / iPod, I don't want to have the graphic displayed.
Other than using javascript like the following in the file h_login.html:
if ((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i))) {
location.replace("h_small_login.html");
which requires a clone of each file, I haven't found a method.
Would prefer to stay using minimal HTML ... vanilla, no CSS, a single "meta" at the
start to specify:
meta name="viewport" content="width=device-width; initial-scale=1.5; maximum-scale=4.0; user-scalable=1;"
thanks!
Stan
By far the easiest way is with a media query. I'm fairly sure i-Devices support this feature of CSS:
#media screen and (max-device-width: 600px) {
img.hide {display:none;}
}
Just add class="hide" to the relevant images, and adjust the 600px (I don't know what the resolution of iPhone and iPad are, but just change the 600 to anything in between the two).
It is far easier to do this than to try and get JavaScript to do the same thing.
jQuery can do this easily:
if ((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i))) {
$("img").attr("display","none");
}
That would remove all images from the document when the useragent is iPhone or iPod. If you aren't using jQuery, but you are using server-side scripting, we'd need to know what language you are using. If you are just using straight HTML, then JavaScript is your only way to modify the page, and jQuery will be your best bet.
Related
I have an image gallery, the images are large enough to fill an iPhone screen.
The images are also links, so as you can imagine, scrolling becomes quite frustrating on the iPhone because you're constantly clicking links by accident.
Is there anyway to prevent this using css alone?
If not then what would be the most simple solution to this problem?
Thanks!
I would suggest to use the Javascript. However, I found a way using only CSS. First step, you will need to identify the client browser, just add the code below in your HEAD session in HTML file:
<link rel="stylesheet" media="only screen and (max-device-width: 480px)" href="../iphone.css" type="text/css" />
Only if client is using a browser in iphone, the content of "iphone.css" will be loaded.
In this file "iphone.css", you need create a class to disable the links:
.disableLink {
pointer-events: none;
cursor: default;
}
In your HTML code of gallery, add the references in your links:
IMAGE
These steps works only in iPhone/iPod touch, but if you look in my second reference, you will see the way to adapt for iPhone 4/iPod touch 4G:
I don’t think there’s a CSS-based solution (CSS isn’t really designed to change the behaviour of HTML elements).
You could use JavaScript on page load to check the width of the browser’s viewport, and then find and disable/remove the links if the viewport is phone-sized.
See PPK’s ‘A Tale of Two Viewports’ article to figure out which JavaScript properties to check to figure out the width in your situation (I haven’t done enough mobile development to remember off the top of my head).
I like the idea of pointer-events: none;, but I wouldn't use it because it isn't well-supported.
If we're defining a mobile device as just having a certain screen size, I would do something like this:
$(function () {
var mobile = ($(window).width() < 481);
$('#image-gallery').find('a').click(function (e) {
if (mobile)
e.preventDefault();
});
});
However, I would try to define 'mobile' as something else, e.g., a browser that supports touch events.
I am having problems with media queries not loading CSS or displaying the style correctly.
What I did was create a style480.css for my iPhone and style.css for normal.
I loaded
<meta name="viewport" content="width=device-width, initial-scale=1"/>
across my site so that it would work.
I set the css on the main site to read style 480 so I could stylize for the iphone. Everything looks great on my iphone, and of course it was just a boring list on my desktop.
After I got my style480 finished, I copied/pasted the css into a
#media only screen and (max-width: 480px) {
{
body {width:100%;}
}
in my style CSS.
Sounds pretty standard.
However it is not formatting correctly on my iPhone
The top nav menu (I used html 5 <nav>) is getting pushed to the left, a few of the lists are being floated when they shouldn't be.
It is like the iphone is mixing elements from in and outside the media query.
I have even tried putting the media query on top, putting it on bottom and loading
-webkit-min-device-pixel-ratio : 1.
Same thing, it is like it is mixing the css.
I even tried loading the css files separately on the HTML... exact same thing.
The only way I can get my iphone css to load correctly is if I set it as the main css for the page. When I am loading 2 sets of css it is not working on the iphone (but it works on my laptop)
If I can find a way to view the css from the iphone I might be able to figure out what it is doing, but until them I am at a loss as to why it is not loading the CSS correctly
It is like the iphone is mixing elements from in and outside the media query.
Well, yes, that's how it works. The stuff outside the media query will be used, unless something inside the media query directly overrides it. You shouldn't pase all your code into the media query, just the stuff you want to adjust for that resolution.
A media query doesn't replace your main CSS file, it supplements it.
So I've been doing phonegap development for a while and have made a couple apps in the app store. I have made iphone and ipad apps and make them completely separate. I know apple allows for the submission of a single app that can be formatted for both devices, my question is how is this done with phonegap? I know I can edit the project settings and select ipad/iphone for the target device. But what do I do in my code to get it to work correctly?
Since it's html, I control sizing in html (and jquery). For example in my iphone app, I might have:
<img src="asdf.jpg" width="480">
And then that same ipad app would be:
<img src="asdf.jpg" width="1024">
It would be really awesome if I can just have two html files in my www folder, say, index.html and index-ipad.html, and then they share common img, css, and js folders. Is this possible?
I've checked the docs on phonegap extensively and couldn't find anything. Can somebody point me to a tutorial to do this? I really hate having multiple apps in the app store for the same content.
EDIT PER COMMENT BELOW
Maybe I wouldn't use the width attribute in html, maybe I would do this:
<img src="asdf_ipad.jpg">
and:
<img src="asdf_iphone.jpg">
where the two images have been sized for the two devices. In any event, I can handle the html/js/css, I just need to know how to implement a "switch" such that the ipad renders different from the iphone.
You can specify what file PhoneGap opens initially. Have a look at application:didFinishLaunchingWithOptions from AppDelegate.m
Do something like this to open a different index page for iPad:
if ([[[UIDevice currentDevice] model] containsString:#"iPad"]) {
...
self.viewController = [[[MainViewController alloc] init] autorelease];
self.viewController.wwwFolderName = #"www-ipad";
self.viewController.startPage = #"index.html";
...
}
why not use CSS media queries to identify your target device and update the images as appropriate? JqueryMobile for example does this to provide high-resolution icons to Retina devices...
Here's an article on how to use those to apply different stylesheets to iPhone vs iPad.
Hope this helps!
One option:
<img src="asdf.png" class="asdf"/>
.ipad .asdf {
width: 1024px;
}
.iphone .asdf {
width: 480px;
}
$(function() {
var deviceType = (device.platform=='iPhone' && screen.width==768) ? 'ipad' : 'iphone';
$('body').addClass(deviceType);
});
Note the deviceType logic is pretty simple (i.e. iPad locked in portrait), you will need to expand the logic to handle orientations and potentially add even further logic to detect Retina devices and in the future higher resolution iPads.
Well, I found a solution, I just use javascript to forward the page to my other html page like this:
if(screen.width==768)
window.location='index-ipad.html';
So I just have that code in my index.html file, and then, of course, I have a different index-ipad.html file. This gives me the freedom to do whatever I want and not limit me to just minor style changes. Note, this didn't work inside the jquery onload stuff $(function() {}); go figure.
I would have preferred to solve this with a "server side" approach, meaning the objective c layer that this resides upon. But, unfortunately, my skills in objective c aren't quite up to par. If anybody can give me that solution, I would greatly appreciate it!
So my website sizes correctly on a laptop PC running Windows 7. Howevever, when run on a iPhone or iPad, a couple things happen. Here's a link to my site to see www.mazzoreporting.com
First, the video in the right column extends beyond the main content box. I don't want to change the width because it makes it smaller on laptop pcs. I believe there is some kind of code I can write in my CSS to fix this?
That's it for now. Any help would be greatly appreciated.
Thanks
Chris
you need to make an separate css and load it in case you detect an ipod/iphone/ipad/ other mobile device or better if you can do an excluve mobile version of you page
There is a "secret" HTML incantation that you need to add to the web page to get WebView to resize it. I think that it is:
<meta name="viewport" content="width=device-width,height=device-height, user-scalable=yes" />
(Within the <head> section.)
I am trying to trouble shoot a css issue that is appearing only in iphone browsers. I simply need to detect if the user is using an iphone, and if so, render a modified version of the div that is being affected.
I am happy to just call this modified version of the css div in the header as it will save having a second style sheet.
You used to be able to do it between browsers. It was especially good when rendering a IE6 fix.
Thanks for your help in advanced.
James
if((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i))) {
// do something
}