Как установить видовое окно только для 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), вы можете достичь того, что вы пытаетесь сделать.
Ответ 7
См. мой ответ ниже о том, как динамически установить начальный масштаб, чтобы весь сайт был правильно масштабирован при загрузке страницы (работает для всех размеров устройства).
Измените вид в плане экрана, чтобы точно отобразить фиксированный элемент измерения
Ответ 8
То, что script от Tim, использующего jquery, кажется, работает хорошо. Я немного изменил его и, похоже, работает для меня. Я добавил некоторые параметры масштаба. Это дало мне результаты, которые мне нужны для отображения страницы на iPhone и ipad. Вот что я добавил:
maximum-scale=2.0; user-scalable=1;