У меня были проблемы с окном просмотра iPhone и JQuery-Mobile, в результате я нашел следующее решение.
- Добавьте метатег, который устанавливает высоту и ширину для device-height / device-width (вы можете позволить пользователю изменять масштаб, изменив максимальный масштаб на значение, превышающее 1, однако в следующем примере масштабирование отключено. поверьте, Mobile Safari допускает значение до 10):
<meta name="viewport" content="height=device-height,width=device-width,initial-scale=1.0,maximum-scale=1.0" >
- Когда пользователь меняет ориентацию на iPhone, я заметил странное поведение с изменением масштаба и добавлением пробела, поэтому я использовал следующий код:
//check the navigator.userAgent string to detect if the user is using an iPhone
if (navigator.userAgent.match(/iPhone/i)) {
//cache the viewport tag if the user is using an iPhone
var $viewport = $('head').children('meta[name="viewport"]');
//bind an event handler to the window object for the orientationchange event
$(window).bind('orientationchange', function() {
if (window.orientation == 90 || window.orientation == -90 || window.orientation == 270) {
//landscape
$viewport.attr('content', 'height=device-width,width=device-height,initial-scale=1.0,maximum-scale=1.0');
} else {
//portrait
$viewport.attr('content', 'height=device-height,width=device-width,initial-scale=1.0,maximum-scale=1.0');
}
//trigger an orientationchange event on the window object to initialize this code (basically in-case the user opens the page in landscape mode)
}).trigger('orientationchange');
}
Оператор if / then в обработчике событий проверяет, для какой ориентации пользователь изменился на (90, -90 и 270 - все значения, которые я видел для ландшафта), а строки $viewport.attr('content',... просто переключают высоту и значения ширины в теге области просмотра.