I want my iphone to autoscale my website on rotation.
when I use this line of code it works:
<meta name="viewport" content="height=device-height, width=device-width, minimum-scale=1.0, user-scalable=yes|no" />
But the problem is that it activates both of my CSS for portrait and lanscape even though it should activate in landscape mode only one:
<link rel="stylesheet" media="screen and (min-device-width : 320px) and (max-device-width : 480px)" type="text/css" href="css/mobileStyles.css?<?php echo date('l jS \of F Y h:i:s A'); ?>">
<link rel="stylesheet" media="screen and (max-width : 320px)" type="text/css" href="css/mobilePortraitStyles.css?<?php echo date('l jS \of F Y h:i:s A'); ?>">
When I use this line instead of the meta above the css works right but no autoscale on rotation:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
What is the problem? What should I do?
Besides the meta line above I have these lines as well:
<meta name="HandheldFriendly" content="True">
<meta name="MobileOptimized" content="320">
<meta name="apple-mobile-web-app-capable" content="yes"/>
I test that on iPhone 4 (using iOS5)
Have you tried using the orientation keyword in your media queries? e.g.
<link rel=”stylesheet” media=”all and (orientation:portrait)” href=”portrait.css”>
<link rel=”stylesheet” media=”all and (orientation:landscape)” href=”landscape.css”>
The issue with no auto scale on rotation is an iOS bug. Setting the max scale in the viewport seems to fix it but actually introduces as number of other issues - as you are seeing here it does not resize the viewport so does not trigger the media queries.
You might want to take a look at the workaround.
Related
This is my first time building a responsive site, and as I tailor the CSS for the iPhone I'm running into a problem. The styles all apply correctly, the text changes size and the wrapper changes widths. The problem is the iPhone browser still opens up at a huge width, see the screenshot:
I'm using
#media all and (max-device-width: 480px) {}
to set the specific iPhone css. body {width:;} doesn't work.
Thanks for the help :)
You have to add the following to your page header
<meta name="viewport" content="initial-scale=1.0, width=device-width" />
As in:
<!doctype html>
<html>
<head>
<title></title>
<meta name="viewport" content="initial-scale=1.0, width=device-width" />
</head>
<body>
</body>
</html>
I have a mobile webapp that I am developing using jquery mobile. I am prompting the users that they can use the add to homescreen function to load the webapp from the desktop. When I test the functionality of the splash screen on my iPhone 3GS, the png file which I wish to load does not load with the splash screen, but rather, a "screen shot" of the site with a white-space at the top where it appears the address bar used to be.
Here is my code
<html><head>
<title>Page Title</title>
<meta content='yes' name='apple-mobile-web-app-capable'>
<meta content='default' name='apple-mobile-web-app-status-bar-style'>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
<link rel="stylesheet" type="text/css" href="css/jquery.mobile.1.min.css" />
<link rel="stylesheet" type="text/css" href="css/mydashboard.min.css" />
<link rel="stylesheet" href="css/add2home.css">
<link rel="apple-touch-icon-precomposed" href="touch-icon-iphone.png" />
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="touch-icon-ipad.png" />
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="touch-icon-iphone4.png" />
<!-- ***Here is my code for splash screen*** -->
<link rel="apple-touch-startup-image" href="Default.png" />
<link rel="apple-touch-startup-image" href="touch-splash-ipad-land.png" media="screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape)" />
<link rel="apple-touch-startup-image" href="touch-splash-ipad-port.png" media="screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait)" />
<!-- ***My JS files are included under this and the closing of the head tag*** -->
I have tried a 320x460 and a 320x480 png file where the Default.png is. Neither have had any success. From what I've read, I think I'm doing this right, but I could be wrong. I'm basing my opinion on https://developer.apple.com/library/archive/qa/qa1588/_index.html
and
https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html
So my question is this, has anyone else seen this? If so, what was the cause and what did you do to resolve the issue if you did resolve the issue? If you haven't seen this particular issue, is there anything you might be able to suggest based on my code above?
The Default.png file MUST be 320x460px.
Try removing the launcher from the home screen and re-adding it from Safari.
That is what I had to do to get mine to work.
I have these 2 rules:
<link rel="stylesheet" media="screen and (max-width:960px)" type="text/css" href="css/mobileStyles.css">
<link rel="stylesheet" media="screen and (max-width:640px)" type="text/css" href="css/mobilePortraitStyles.css">
They work on my browser (when I adjust the browser width) but when I check them on my iPhone, either portrait or landscape, it loads both style sheets.
Why on landscape view it loads the 640px style sheet?
the web view size of iPhone safari browser is either 320x480px or 480x320px in landscape for both display type. so the web developer don't need to resize his css for Non-Retina and Retina Displays.
For targeting only Retina Display
<link rel="stylesheet" media="only screen and (-webkit-min-device-pixel-ratio: 2)" type="text/css" href="../iphone4.css" />
In your case the the second style sheet is loaded because in both cases (320 or 480px) your web view is under 640px.
i would recommend to use orientation as css media query for you case.
Add this in the head of your HTML document:
<meta name="viewport" content="width=device-width, initial-scale=1"/>
Write max-device-width instead of max-width
<link rel="stylesheet" media="screen and (max-device-width:960px)" type="text/css" href="css/mobileStyles.css">
<link rel="stylesheet" media="screen and (max-device-width:640px)" type="text/css" href="css/mobilePortraitStyles.css">
Also, it's better if you define their orientation like this:
<link rel="stylesheet" media="screen and (orientation:portrait)" href="portrait.css">
<link rel="stylesheet" media="screen and (orientation:landscape)" href="landscape.css">
when using
<link rel="stylesheet" media="all and (max-width: 640px) and (orientation:portrait)" href="css/i-hoch.css">
<link rel="stylesheet" media="all and (max-width: 960px) and (orientation:landscape)" href="css/i-quer.css">
on iPhone Mobile Safari the CSS is changed when device is rotated.
The same Page does not load the different CSS when this code is used within the PhoneGap Framework (0.9.5.1). We also had issues with the
<meta name="viewport"
which could be fixed but orientation problems remain.
Any hints how to solve this issue are appreciated. Thanks in advance - Alex
#alex, may be first you have check you css file link with firebug & if the path is correct then
write like this
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" media="all and (orientation:portrait)" href="css/i-hoch.css">
<link rel="stylesheet" media="all and (orientation:landscape)" href="css/i-quer.css">
may be that's helpful
Working good with iPad but not iPhone
Any code can I direction to iPad and iPhone
for iPad
<meta name="viewport" content="width=1040px, minimum-scale=0.5, maximum-scale=1.0" />
for iPhone
<meta name="viewport" content="width=440px, minimum-scale=0.5, maximum-scale=1.0" />
iPhone max-width is 480px not 440px
<meta name = "viewport" content = "user-scalable=no, width=device-width"/>
<meta name="apple-mobile-web-app-capable" content="yes"/>
This sets the viewpoint with the scaleable option off
<link media="only screen and (device-width: 768px)" rel="stylesheet" href="css/ipad.css" type="text/css" title="no title"/>
This is a css file for only iPad
<link media="only screen and (max-device-width: 480px)" rel="stylesheet" href="css/small-device.css" type="text/css" title="no title"/>
This is a css file for only iPhone
They are conditional comments so they will only apply to specific devices with specified max-widths.