Как установить видовое окно только для iphone или ipad?

У меня есть веб-сайт, который должен использовать значение 0.3 для видового экрана на iphone, но 0.7 для ipad.

Есть ли способ установить область просмотра только для iphone или ipad?

Ответы

Ответ 1

Вот одно решение...

<!-- in head -->
<meta id="viewport" name='viewport'>
<script>
    (function(doc) {
        var viewport = document.getElementById('viewport');
        if ( navigator.userAgent.match(/iPhone/i) || navigator.userAgent.match(/iPod/i)) {
            viewport.setAttribute("content", "initial-scale=0.3");
        } else if ( navigator.userAgent.match(/iPad/i) ) {
            viewport.setAttribute("content", "initial-scale=0.7");
        }
    }(document));
</script>

Ответ 2

Я нашел простой способ с jQuery!

Добавьте это в тег <head>:

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

<script>if ($(window).width() < 600) { $('meta[name=viewport]').attr('content','initial-scale=0.54, maximum-scale=0.54, user-scalable=no'); }</script>

Тег <meta> устанавливает масштаб по умолчанию, и тег <script> перезаписывает область просмотра, если ширина экрана устройства меньше 600 пикселей (я думаю, что все телефонные устройства находятся под 600 пикселями).

Я не мог найти простого решения нигде, поэтому я придумал это:)

Ответ 3

Обратите внимание: meta viewport - это список с разделителями-запятыми, вы не должны использовать точки с запятой.

<meta name = "viewport" content = "width = 320,
       initial-scale = 2.3, user-scalable = no">

Источник: синтаксис видового экрана в документации Apple и Настройка Viewport - статья Apple

(Если бы у меня было больше очков репутации, я бы добавил это как комментарий)

Ответ 4

Для всех мобильных устройств попробуйте что-то вроде этого.

<meta name="viewport" content="width=1024">
<script src="//code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
  if (/iphone|ipod|android|blackberry|opera mini|opera mobi|skyfire|maemo|windows phone|palm|iemobile|symbian|symbianos|fennec/i.test(navigator.userAgent.toLowerCase())) {
    $("meta[name='viewport']").attr("content", "width=640");
  }
</script>

Ответ 5

Если вам нужно установить другой видовой экран, на основе устройства (iPhone/iPad), вам нужно установить видовое окно с использованием ширины устройства

<meta name="viewport" content="initial-scale=1.0; maximum-scale=1.0; width=device-width;">

В приведенном выше заявлении будет установлен вид 320px на iPhone и 768 пикселей на iPad. Разумеется, это то, что woudld переводят на 0,3 и 0.7 u ищут.

Это сработало, но только после. Я понял, что эта строка не входит в раздел...! Немой, но, возможно, нужно сказать.

Спасибо!

Ответ 6

Я не уверен, что вы можете установить видовое окно только для iPhone, но вы можете установить медиа-запрос и, следовательно, CSS для iPhone, который, как я думаю.

Установив медиа-запрос только для ширины устройства iPhone (320x480) или iPad (1024x768), вы можете достичь того, что вы пытаетесь сделать.

Ответ 8

То, что script от Tim, использующего jquery, кажется, работает хорошо. Я немного изменил его и, похоже, работает для меня. Я добавил некоторые параметры масштаба. Это дало мне результаты, которые мне нужны для отображения страницы на iPhone и ipad. Вот что я добавил:

maximum-scale=2.0; user-scalable=1;