CSS медиа запрос на iPhone - PullRequest
Новая
       54

CSS медиа запрос на iPhone

7 голосов
/ 31 мая 2011

Я пытаюсь использовать медиа-запрос CSS, специально предназначенный для iPhone.

Работает, когда я использую обычную ссылку rel: 

<link rel="stylesheet" type="text/css" href="css/mobile.css" />

Однако, когда я пытаюсь выполнить этот медиа-запрос, он не работает: 

<link rel="stylesheet" type="text/css" href="css/mobile.css" 
      media="only screen and (max-width: 640px)" />

Как использовать медиа-запрос CSS для таргетинга на iPhone?

Ответы [ 2 ]

14 голосов
/ 31 мая 2011

Попробуйте: 

<link rel="stylesheet" type="text/css" href="css/mobile.css" media="only screen and (max-device-width: 480px)" />

Разница составляет max-device-width вместо max-width. Также см. 2) на http://blogs.sitepoint.com/iphone-development-12-tips/.

4 голосов
/ 31 мая 2011

Я знаю, что это не совсем то, что вы спросили, но я только что ответил на что-то похожее и может помочь: 

<meta name='viewport' content='width=device-width; initial-scale=1.0;' />

Существует множество параметров для CONTENT, некоторые из них: 

maximum-scale=3.0; //Maximum zoom allowed 0 to 10.0. default is 1.6
minimum-scale=0.5; //Minimum zoom allowed 0 to 10.0. default is 0.25
user-scalable=1; //YES/NO
width=device-width; //default if not set is 980px 
initial-scale=1.0; //Initial zoom. 0 to 10.0. 1.0 would be 100%
height=device-height;

Контент в UIWebView на iOS 3.1.3 выглядит увеличенным, но на iOS 4.3 выглядит нормально

Редактировать: Вы можете также использовать эти параметры в Safari, забудьте о функции uiwebview, которая предназначена только дляродные приложения.

...