Как я могу использовать meta viewport и CSS media-запросы, чтобы средний веб-сайт 960px выглядел хорошо на iPhone и iPad?

Вопрос

Я знаю, что есть много вопросов о переполнении стека о теге meta viewport, но я не могу найти никого, спрашивающего, что, по-видимому, самый очевидный и полезный вопрос:

Как я могу использовать запросы мета-виджета и CSS-мультимедиа, чтобы средний дизайн веб-сайта 960px выглядел хорошо на iPad (и на рабочем столе), сохраняя при этом меньший размер окна и дизайн сайта (например, 320 пикселей) для iPhone и других мобильных телефонов?

Для iPhone, я думаю, это само собой разумеется: идеальный телефон с удобным телефоном (например, 320 пикселей в ширину). Но для iPad большего размера специальный мобильный сайт не нужен; использование нормального дизайна сайта 960px кажется уместным. Сайт на 320 пикселей выглядит клоунским на iPad, и я не всегда хочу создать третий вариант для iPad 768px.

Здесь проблема: я не могу понять, как использовать тег meta viewport и мультимедийные запросы CSS для достижения как 1) обычного сайта на iPad, так и 2) мобильный сайт на iPhone. Я понимаю, что это возможно с помощью JavaScript-хаков (например, динамическое изменение тега meta viewport в соответствии с устройством), но я не хочу использовать JavaScript; Я не думаю, что JS нужно будет требовать базового удобства использования на простом веб-сайте со статическим контентом.

1) Если я полностью удалю тэг meta viewport, мой обычный сайт 960px отлично выглядит на iPad, но плохой на iPhone (большой пустой край справа):

Website example without meta viewport tag

2) С другой стороны, если я использую <meta name="viewport" content="width=device-width" />, тогда сайт отлично выглядит на iPhone, но плохой на iPad (увеличен до 768 пикселей, выгружается сайт за пределами области просмотра):

Website example with meta viewport tag

Кажется, что это должно быть самое простое в мире, но я не смог его решить. Что мне не хватает?

Разметка /CSS

CSS

<style type="text/css">
body { margin: 0; }
.mobile { width: 320px; background: #fdd; display: none; }
.desktop { width: 960px; background: #ddf; }
</style>

<style type="text/css" media="screen and (max-device-width: 480px)">
.mobile { display: block; }
.desktop { display: none; }
</style>

Разметка:

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
</head>
<body>
<div class="mobile">Phone (320px)</div>
<div class="desktop">Desktop and tablet (960px)</div>
</body>
</html>

Ответы

Ответ 1

Объедините медиа-запрос с zoom.

@media only screen and (min-device-width:768px) and (max-device-width:1024px) and (orientation:portrait) {
    html {zoom:0.8;}
}

Ответ 2

Попробуйте добавить максимальный масштаб к вашему метатегу:

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

Ответ 3

Вы можете использовать JS, чтобы вырвать теги метаопределения, как здесь обсуждается Cole - http://cole007.net/blog/136/responsiveish-viewport-hack там также есть еще один вариант в комментариях

Ответ 4

Я использую метод обнаружения мобильной почты Serban Ghita php:

https://github.com/serbanghita/Mobile-Detect

... тогда этот php в теге head:

<?php
if ($detect->isMobile() && !$detect->isTablet()) {?>
   <meta name="viewport" content="width=device-width, initial-scale=1.0, max-scale = 1.0">
<?php } ?>

Отлично работает.