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

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

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

 Ross21 мая 2012 г., 14:51
@fichek в этом случае, здесь нет ответов на вопрос ОП. Это включает в себя ваш собственный ответ. Прежде чем просить ОП ответить, перечитайте вопрос :)
 Filip Radelic07 сент. 2011 г., 09:51
Если вы не удовлетворены полученными ответами, прокомментируйте их, чтобы люди могли их улучшить. Если да, примите один из них.

Ответы на вопрос(8)

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

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

Добавьте это к<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 пикселей).

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

 Ross21 мая 2012 г., 15:59
IPhone изначально устанавливает ширину окна в 960 пикселей.
 DD.12 июн. 2013 г., 20:11
Это не сработало для меня

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

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

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

<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>

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

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

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

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

То, что сделает вышеупомянутое утверждение, это установить область просмотра 320px на iPhone и 768px на iPad.

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

Спасибо!

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

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

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

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

 Ikrom26 февр. 2014 г., 13:03
Теперь у вас достаточно репутации, чтобы добавить комментарий :)
 Akshay Gundewar30 янв. 2017 г., 10:27
ссылка не работает
 babca31 янв. 2017 г., 15:15
проверяется и обновляется

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

<!-- 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>
 atw1313 окт. 2014 г., 23:48
Плюс один для решения не JQuery, хотя я использую JQuery. Я хочу убедиться, что это работает как можно скорее на компьютере.
 DyeA07 янв. 2013 г., 21:17
Я вижу, вы используете IIFE, можно ли исключить обертку выражения функции и эффект будет таким же? В чем преимущество формата IIFE в этом случае?
 bioball18 сент. 2014 г., 23:13
IIFE должен управлять областью действия, поэтому любые переменные, объявленные в рамках IIFE, не загрязняют глобальную область действия (например,viewport)

Ваш ответ на вопрос