Обработка ширины устройства на сайте фиксированной ширины

Question

У меня есть сайт с фиксированной шириной 1024px и расположен на рабочем столе. На мобильных устройствах ширина должна соответствовать размеру телефона или планшета.

При использовании устройства ширины, как этот

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

я получаю следующий результат:

я получить тот же результат с помощью width=1024.

... Это действительно сбивает с толку, так как пользователь не может собрать обзор. Я не знаю, почему device-width устанавливает видовое окно веб-сайта этого размера. Я бы ожидал иначе.

Что я ожидал, и что я действительно хочу что-то это:

Вопрос: Как сказать устройство, чтобы соответствовать веб-сайт на экране точно?

Answer 1

Что вы получили, когда удаляете масштабный коэффициент из метатега? И еще один вопрос: хотите ли вы, чтобы пользователи увеличивали масштаб (масштаб) страницы или нет? Постараюсь лучше:

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

, а также:

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

Для подгонки высоты и ширины вы можете играть с теми мета:

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

Answer 2

Для того, чтобы сделать сайт адаптивный и отзывчивым Я рекомендую использовать

@media screen and (max-width: the max width you want){ } 

Вы также можете добавить это в свой. Это позволит сделать первоначальный масштаб 1 и позволить некоторое масштабирование в 3.

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

Вы также должны использовать% вместо пикселей на обертывание элементов. Таким образом, он настраивается в соответствии с вашим экраном.

Вот пример:

• Для устройств с шириной 0-500px, запустить второй код CSS.
• Для устройств с шириной 500-1600 пикселей запустите первый код CSS.

Можно также указать на сетчатке с помощью этого:

@media 
only screen and (-webkit-min-device-pixel-ratio: 2), 
only screen and (-moz-min-device-pixel-ratio: 2), 
only screen and (-o-min-device-pixel-ratio: 2/1), 
only screen and (min-device-pixel-ratio: 2), 
only screen and (min-resolution: 192dpi), 
only screen and (min-resolution: 2dppx){ } 

Это другой пример:

/** From 500 - 1600px width **/ 
@media screen and (max-width: 1600px){ 
    body { 
     background-color: #fff; 
    } 
} 
/** From 0 - 500px width **/ 
@media screen and (max-width: 500px){ 
    body { 
     background-color: #000; 
    } 
} 

Я задал подобный вопрос ранее. Вы можете проверить это here.