Измените окно просмотра планшета, чтобы оно точно отображало элемент фиксированного размера
я есть веб-сайт, который должен использовать значение 0,3 для области просмотра на iphone, но 0,7 для Ipad.
Есть ли способ установить область просмотра только для iphone или ipad?
Ответы на вопрос(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 пикселей).
Я не мог найти простое решение в любом месте, поэтому я придумал это :)
как динамически установить начальное увеличение, чтобы весь сайт корректно масштабировался при загрузке страницы (работает для всех размеров устройств).
Измените окно просмотра планшета, чтобы оно точно отображало элемент фиксированного размера
Для всех мобильных устройств попробуйте что-то вроде этого.
<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
(Если бы у меня было больше очков репутации, я бы добавил это как комментарий)
Вот одно из решений ...
<!-- 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>
viewport)