Как настроить видовой экран только для iphone или ipad? - PullRequest
Новая
       1

Как настроить видовой экран только для iphone или ipad?

15 голосов
/ 25 января 2011

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

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

Ответы [ 8 ]

28 голосов
/ 21 мая 2012

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

<!-- 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>
10 голосов
/ 06 августа 2011

Я нашел простой способ с помощью 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 пикселей).

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

8 голосов
/ 30 декабря 2011

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

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

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

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

5 голосов
/ 02 мая 2013

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

<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>
3 голосов
/ 10 сентября 2011

Если вам нужно установить другой видовой экран, в зависимости от устройства (iPhone / iPad), вам нужно установить видовой экран, используя device-width 

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

.установите область просмотра 320px на iPhone и 768px на iPad .. Угадайте, это то, что woudld переводит в 0.3 и 0.7 u, которые вы ищете ..

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

Спасибо!

1 голос
/ 21 августа 2013

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

maximum-scale=2.0; user-scalable=1;
0 голосов
/ 13 апреля 2013

См. Мой ответ ниже о том, как динамически установить начальное увеличение, чтобы весь сайт правильно масштабировался при загрузке страницы (работает для всех размеров устройств).

Измените окно просмотра планшета, чтобы оно точно отображало элемент фиксированного размера

0 голосов
/ 01 августа 2011

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

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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...