Правильный синтаксис медиазапроса CSS Iphone - PullRequest
Новая
       15

Правильный синтаксис медиазапроса CSS Iphone

0 голосов
/ 30 марта 2012

Мне удалось правильно отформатировать сайт для устройств, используя онлайн-тестер адаптивного дизайна и объявление css, например, @media only screen and (max-width: 480px) {, но при тестировании сайта на реальном iphone эти объявления CSS не вычисляются браузером ,

Я также пробовал max-device-width и установил начальную шкалу на <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"/>. Я также пробовал предыдущую декларацию без начальной настройки шкалы.

Я также пробовал: @media screen and (-webkit-min-device-pixel-ratio: 2), screen and (max--moz-device-pixel-ratio: 2) {

Также: only screen and (-webkit-min-device-pixel-ratio : 2), only screen and (min-device-pixel-ratio : 2) {

Ничего из этого еще не сработало для нацеливания на iphone. Чего мне не хватает, чтобы успешно настроить iphone 3/4?

Ответы [ 2 ]

1 голос
/ 30 марта 2012

Тьфу ... Я вообще не доверяю медиазапросам для выполнения этой задачи

Они слишком часто подводили меня.Если вам не повезло, воспользуйтесь JS или серверным решением для обнаружения устройства.Возможно, пойти на это JS: 

var pixelRat = window.devicePixelRatio;
var screenWidth = screen.width;

//iPhone Retina Display
if ( pixelRat >= 2 )
{
  $('meta[name=viewport]').attr('content','initial-scale=.5, maximum-scale=.5');
  $('link[name=mainstyle').attr('href', 'css/iphoneHD.css');
}
//iPhone 3gs, 3g, Edge
else if ( pixelRat < 2 && screenWidth == 320 )
{
  $('meta[name=viewport]').attr('content','width=device-width, minimum-scale=1.0, maximum-scale=1.0');
  $('link[name=mainstyle]').attr('href', 'css/iphone.css');
}
//iPad 1 and 2
else if ( pixelRat < 2 && screenWidth == 768 )
{
  $('meta[name=viewport]').attr('content','width=device-width, minimum-scale=1.0, maximum-scale=1.0');
  $('link[name=mainstyle]').attr('href', 'css/mobile.css');
  $('link[name=loginpadstyle]').attr('href', 'css/loginpad.css');
}
//Mac OS X, Windows, Etc.
else
{
  $('meta[name=viewport]').attr('content','width=device-width, minimum-scale=1.0, maximum-scale=1.0');
  $('link[name=mainstyle').attr('href', 'css/style.css');
}
0 голосов
/ 14 апреля 2012

Я успешно смог настроить таргетинг на iphone и устройства с помощью объявления css: 

@media all and (max-width: 480px)  {
    /* put iphone css formatting here */  
}

например. Спасибо за вклад.

...