Метаданные Viewport vs Media Queries?

Я хотел бы знать, оптимизировать ваш сайт для планшетов, настольных компьютеров и smarthpones, что лучше всего использовать: медиа-запросы или метатеги Viewport? см. код:

<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

против

/* Smartphones (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {
/* Styles */
}

/* Smartphones (landscape) ----------- */
@media only screen 
and (min-width : 321px) {
/* Styles */
}

/* Smartphones (portrait) ----------- */
@media only screen 
and (max-width : 320px) {
/* Styles */
}

/* iPads (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) {
/* Styles */
}

/* iPads (landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) {
/* Styles */
}

/* iPads (portrait) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) {
/* Styles */
}

/* Desktops and laptops ----------- */
@media only screen 
and (min-width : 1224px) {
/* Styles */
}

/* Large screens ----------- */
@media only screen 
and (min-width : 1824px) {
/* Styles */
}

/* iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}

Ответ 1

я бы сказал, что каждая ситуация различна... и это не является ни/или ситуацией. метатег видового экрана, который у вас есть, сделает его таким, чтобы сайт поддерживал соотношение 1 к 1, что во многих случаях является хорошим. однако он также настраивается пользователем "нет" - и это означает, что пользователь не сможет увеличивать и т.д.... иногда, когда ipads и другие устройства меняют ваш сайт на лучшее... (зависит)

лучший метод, который я нашел, - использовать медиа-запросы и выбрать один из двух режимов:

начать с малого и наращивать
начинать с большого и строить вниз

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

то после всего этого... проверьте на устройствах и попробуйте различные метатеги просмотров.

есть много замечательных статей об этом... используйте ключевые слова, такие как "отзывчивый дизайн" или "адаптивный" или "RWD" отзывчивый веб-дизайн. и удачи!!!

Ответ 2

Оба необходимы.

Медиа-запросы используются для того, чтобы разные css для разных устройств были похожи на условия if для разных устройств.

Viewport метатег должен установить, чтобы устройство приняло ширину в соответствии с этим тегом. Это похоже на reset для устройств, если его неиспользуемое устройство отрегулирует макет в соответствии со своими настройками по умолчанию.

Ответ 3

Это зависит от того, чего вы хотите достичь.

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

Если вам нужен настоящий отзывчивый дизайн, вы должны установить метатеги viewport на ширину устройства и использовать медиа-запросы для планирования макета для разных разрешений, как показано в вашем коде.