Geek Answers Handbook

IPad landscape scales my site - I don't know how to fix it

My test page: http://dev.my-igloo.net/ps-rwd/

I'm trying to think about media queries and change the width of the site to match the width of the browser - the site should work on the iPad and iPhone, and at the moment I'm testing it on the iPad and I'm going a little crazy.

Please keep in mind that the design / layout of the site is not completed at the moment, because I just work with the initial settings here, before I delve into improving everything. I set a different background color for each stylesheet so that it is easy to see which one is loaded.

I have this in my tag:

<meta name="viewport" content="initial-scale=1.0, width=device-width" />

and if I set media queries as follows:

<!-- Main Stylesheet -->
<link rel="stylesheet" type="text/css" href="ps-default.css" />

<!-- Main Stylesheet -->
<link rel="stylesheet" type="text/css" href="ps-default.css" media="screen and (min-width: 769px)" />
<!-- 768 wide screens -->
<link rel="stylesheet" type="text/css" href="ps-768.css" media="screen and (min-width: 481px) and (max-width: 768px)" />
<!-- 480 wide screens -->
<link rel="stylesheet" type="text/css" href="ps-480.css" media="screen and (min-width: 321px) and (max-width: 480px)" />

iPad , , , , , , .

? , , , 1.0, .

-:

<!-- For Desktop Browsers -->
<link rel="stylesheet" type="text/css" href="ps-default.css" media="screen and (min-width: 1024px)" />
<link rel="stylesheet" type="text/css" href="ps-768.css" media="screen and (min-width: 769px) and (max-width: 1024px)" />

<!-- 768 wide screens -->
<link rel="stylesheet" type="text/css" href="ps-768.css" media="screen and (max-width: 768px) and (orientation:portrait)" />
<link rel="stylesheet" type="text/css" href="ps-480.css" media="screen and (min-width: 481px) and (max-width: 767px) and (orientation:landscape)" />

<!-- 480 wide screens -->
<link rel="stylesheet" type="text/css" href="ps-480.css" media="screen and (max-width: 480px) and (orientation:landscape)" />

iPad 768, - , .

: http://developer.apple.com/library/safari/#documentation/AppleApplications/Reference/SafariHTMLRef/Articles/MetaTags.html#//apple_ref/doc/uid/TP40008193 . , , , , , .

- , - .

+5
4

, , , , , Safari . Safari , . , width = device-width, 768px .

, , 100- 768 , 1024 . ( 768px 1024px, ).

, , .

<meta name="viewport" width="1024" />

, , . , , , - - .

+4

- Safari. , , - :

<meta name="viewport" content="width=768px, minimum-scale=1.0, maximum-scale=1.0" />

. , . , .

, JS-: https://gist.github.com/901295, . , , .

+3

. ipad iPhone , .

<meta name="viewport" content="width=1062px, user-scaleable=yes" />

1062px : 800px - .

+1

@ graham-t has a better solution here IMO, but there is only one problem with it; Now it will not resize depending on the resolution of the device.

This does the trick for me at least - I get the width and don't scale on the iPad in landscape mode, and also resize correctly on other devices:

<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0" />

+1
source

More articles:


All Articles