Оптимизация CSS 720*1280 мобильных устройств

Question

Я пытаюсь оптимизировать свою веб-страницу до 720*1200 мобильных устройств: Моя страница

Он отлично работает на устройствах 320*480 и 480*800, но не на 720*1200. Загрузка страниц увеличивается, точно так же, как область просмотра макета будет 720*1030, но визуальная область просмотра будет 360*515.

Я установил тег viewport, но он не имеет никакого эффекта.

<meta name="viewport" content="width=device-width,user-scalable=false" />
<title>teeg bejelentkezes</title>
<link rel="stylesheet" type="text/css" media="only screen and (min-device-width:720px)" href="css/style-720.css" />
<link rel="stylesheet" type="text/css" media="only screen and (max-device-width:719px) and (max-width:719px) and (min-device-width:480px) and (min-width:480px)" href="css/style.css" /> 
<link rel="stylesheet" type="text/css" media="only screen and (max-device-width:479px) and (max-width:479px)" href="css/style-320.css" />  

Спасибо за любую помощь!

Answer 1

Спасибо за ответы, я попробовал предложение Мэтта Кафлина, но AVD (720*1280) включал 480px css вместо 720. В конце я переключил свой подход и изменил свой дизайн на адаптивный. RWD и примеры

Answer 2

Рекомендация:

• использование min-width а также max-width в медиа-запросах.
• Избегать использования min-device-width а также max-device-width,

Метатег Viewport:

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

добавлять minimum-scale, maximum-scale, или же user-scalable если нужно.

Медиа-запросы:

<link rel="stylesheet" type="text/css"
      media="only screen and (min-width:720px)"
      href="css/style-720.css" />

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

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

Объяснение:

min-width а также max-width легче работать с чем min-device-width а также max-device-width, Использование всех 4 из них может привести к медиазапросам, которые не будут применяться в некоторых случаях, так как два набора значений не всегда совпадают.

На устройствах iOS min-device-width а также max-device-width действовать на ширину в ландшафтном режиме, независимо от ориентации, в то время как min-width а также max-width действовать на ширину текущей ориентации.

Кроме того, на устройствах Android, min-device-width а также max-device-width соответствуют физическим пикселям, в то время как min-width а также max-width соответствуют провалам (независимым от устройства пикселям), что облегчает работу с устройствами с различными плотностями пикселей.

Boston Globe, лучший пример адаптивного дизайна, адаптированного к контенту, почти полностью работает над min-width а также max-width,

Answer 3

Попробуйте это:

width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0