Как мне поддерживать большую ширину области просмотра на веб-сайте с поддержкой CSS3 и заставить мобильный браузер использовать нужную ширину?

Question

У меня есть сайт с фиксированной шириной 1000 пикселей. Я хочу поддержать 2 меньших ширины этой страницы. Я успешно сделал это с помощью медиа-запросов CSS, как это:

@media only screen and (min-width : 800px) and (max-width : 999px) {
  #content { width:800px; }
}
@media only screen and (max-width : 799px) {
  #content { width:600px; }
}

Теперь, когда я тестирую свою веб-страницу в браузере Android (2.3.3), он использует ширину области просмотра 1000 пикселей, поэтому он отображает веб-сайт во всю ширину. Но было бы намного лучше, если бы он выбрал ширину области просмотра 800px, потому что веб-страница будет отображаться более оптимизированной для устройства с меньшими дисплеями.

Я знаю, что могу установить ширину области просмотра, например: <meta name="viewport" content="width=800px" /> или установить ширину ядра, соответствующую физической ширине устройства, используя: <meta name="viewport" content="width=device-width" />, но ни одна из них не будет работать. Потому что либо в первом случае все мобильные устройства будут использовать область просмотра 800px, либо во втором случае физическую ширину пикселей на устройстве, но это тоже не сработает, потому что в портретном режиме (как большинство людей путешествуют по мобильному телефону) Интернета и телефона), который будет 300px или максимум 400px, что слишком мало, и пользователю придется много прокручивать по горизонтали.

Таким образом, на самом деле мой вопрос таков: могу ли я поддерживать и, возможно, заставить мобильные браузеры использовать различную ширину области просмотра в зависимости от их фактического размера экрана? Я не знаю, объяснил ли я это должным образом, поэтому я приведу пример того, чего я хочу достичь:

Для мобильных устройств с физической шириной 400 пикселей (современные устройства с большими дисплеями) я хотел бы использовать область просмотра шириной 800 пикселей и, возможно, со шкалой 0,5, чтобы при первом посещении страницы отображаться полностью без необходимости горизонтальной прокрутки и с опцией пользователя чтобы увеличить части страницы.

Для мобильных устройств с физической шириной 300 пикселей (некоторые устройства среднего класса и устройства младшего класса) или меньше - я хотел бы установить область просмотра шириной 600 пикселей и, возможно, со шкалой 0,5, чтобы при первом посещении он отображался полностью или по крайней мере большая часть экрана на экране с небольшой горизонтальной прокруткой. И, конечно же, пользователь может увеличить части страницы.

Возможно ли это настроить, используя только CSS или CSS3? Я могу представить решение JS, но я хотел бы реализовать это только с помощью CSS.

Спасибо за любую помощь заранее.

Answer 1

просто добавьте еще несколько медиа-запросов и css zoom

//base setting, overwrite with other queries
#content { width:800px; }

@media only screen and (max-width : 799px) {
  #content { width:600px; }
}

@media only screen and  (min-width : 400px) and (max-width :599px) {
  #content { width:800px;}
//don't need to set zoom as it is handled by the next media query

}
@media only screen and (max-width : 599px}
  body{zoom:200%} 
//don't need to set #content as it has a default value of 600 set in the first media query.
}

Вы также можете установить начальный масштаб, выполняя сниффинг пользовательского агента или добавляя его с помощью javascript, основанного на размере вдовы, однако только с помощью css вы можете использовать zoom для увеличения (пользователь всегда может уменьшить)

Answer 2

Я понимаю некоторую часть вашего вопроса ... Я работал в основном на устройствах iPhone / iPad и меньше на устройствах Android ...

Я бы порекомендовал использовать

<meta name="viewport" content="width=device-width" />

для установки области просмотра на основе ширины устройства.

Теперь, даже если вы говорите, что это не сработает при изменении ориентации, на iPhone / iPad ширина устройства всегда составляет 768 пикселей независимо от ориентации.

Так что по крайней мере на этих устройствах установка ширины устройства будет в порядке ..

Для устройств Android я не совсем уверен, что ширина устройства возвращается разной в каждой ориентации. Я думаю, что это должно быть то же самое.

Не могли бы вы попробовать установить метатег, как указано выше, и посмотреть, работает ли он нормально. если нет, я бы мог предложить другой способ ..

Спасибо.

Answer 3

Вот некоторые Css, которые могут вам помочь:

// target small screens (mobile devices or small desktop windows)  
@media only screen and (max-width: 480px) {  
/* CSS goes here */  
}  

/* high resolution screens */  
@media (-webkit-min-device-pixel-ratio: 2),  
         (min--moz-device-pixel-ratio: 2),  
         (min-resolution: 300dpi) {  
header { background-image: url(header-highres.png); }  
}  

/* low resolution screens */  
@media (-webkit-max-device-pixel-ratio: 1.5),  
         (max--moz-device-pixel-ratio: 1.5),  
         (max-resolution: 299dpi) {  
header { background-image: url(header-lowres.png); }  
}  

Если не читать эту ссылку

http://davidbcalhoun.com/2010/using-mobile-specific-html-css-javascript

Answer 4

Вы можете сделать это в javascript, получив элемент viewport (либо по id, либо по имени) и установив его, проверив screen.width или window.outerWidth на лету.

function setViewport() {
    var viewport = document.getElemementById("viewport");


    if(window.outerWidth <= 400) {
        //screen.width gives display pixel count, use window.outerWidth for physical pixel count.
        viewport.setAttribute('content', 'width=800);
    } 
}

Answer 5

Вы пытались просто полностью уменьшить масштаб, а затем позволить пользователю масштабироваться, чтобы увидеть, что вы хотите?

Попытка:

<meta name="viewport" content="width=device-width,minimum-scale=0.25,height=device-height,user-scalable=yes" />