Недавно я работал над iPad и подумал, что я опубликую некоторые приемы и мысли о том, как очистить cookie iport viewport с помощью jQuery. Я довольно плохо знаком с этой манипуляцией с мобильным окном просмотра, поэтому не стесняйтесь меня поправлять, оставляйте комментарии.
Начальная настройка метатега окна просмотра
$('meta[name=viewport]').attr('content','width=device-width, user-scalable=yes, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0');
Обратите внимание, что Жест запуска — это имя события, которое захватывает масштаб экрана iPad.
$(document).live('gesturestart', function()
{
$('meta[name=viewport]').attr('content','width=device-width, user-scalable=yes, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0');
});
Другие методы, которые могут работать
Слушатели событий, чтобы обнаружить изменение ориентации экрана iPad.
(function(doc) {
var addEvent = 'addEventListener',
type = 'gesturestart',
qsa = 'querySelectorAll',
scales = [1, 1],
meta = qsa in doc ? doc[qsa]('meta[name=viewport]') : [];
function fix() {
meta.content = 'width=device-width,minimum-scale=' + scales[0] + ',maximum-scale=' + scales[1];
doc.removeEventListener(type, fix, true);
}
if ((meta = meta[meta.length - 1]) && addEvent in doc) {
fix();
scales = [.25, 1.6];
doc[addEvent](type, fix, true);
}
}(document));
Измените настройки метатега окна просмотра на основе функции doorientationchange (), которая определяет, что альбомные режимы iPhone / iPad перезагружают страницу.
var viewportmeta = document.querySelector && document.querySelector('meta[name="viewport"]'),
ua = navigator.userAgent;
function allowscale()
{
viewportmeta.content = "width=device-width, minimum-scale=0.25, maximum-scale=3.2";
}
var t=setTimeout("allowscale()",1000);
//and re-fix the orientation bug to clean up all problems:-
function doorientationchange()
{
if (viewportmeta && /iPhone|iPad/.test(ua) && !/Opera Mini/.test(ua))
{
if(((window.orientation)&2)==2) {
location.reload(false); // Safari messes up when changing into landscape mode… so reload to fix it.
}
}
}
Вы также можете использовать свойства CSS как таковые:
body
{
-webkit-text-size-adjust:none;
-webkit-transform: scale(1.1);
}