У меня есть очень простая страница HTML с этим Метатегом для iPhone:
<meta name="viewport" content="height=device-height,width=device-width,initial-scale=1.0,user-scalable=no" />
Используя iPhone Safari, когда страница загружается в режиме портрета, это выглядит хорошо, и ширина соответствует экрану. Когда я поворачиваю iPhone к альбомному режиму, веб-страница автоматическая измененный для установки альбомной ширине. Хороший, это - то, что я хочу.
Но когда я вращаюсь назад от среды, страница не изменена назад для установки, ширина портрета как она была прежде. Это остается в альбомной ширине.
Я хочу, чтобы iPhone задержал его к правильной ширине автоматически, точно так же, как это сделало для альбомного режима. Я не думаю, что это должно вовлечь слушателей ориентации, потому что это все сделано автоматически, и у меня нет специального моделирования для различных режимов.
Почему iPhone не изменяет размер веб-страницы назад в режиме портрета? Как я фиксирую это?
Мне удалось добраться, iPhone к автоматическому изменяют размер вниз, но со странным явлением выполнения его только после четного числа вращений... Очень очень странный.
Я использую этот Метатег:
<meta name="viewport" content="height=device-height, width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
Вот то, что я должен сделать для получения его автоматический измененный:
1. На загрузке в портрете-> выглядит хорошим.
2. Вращайтесь для озеленения-> измененный для установки экрану.
3. Вращайтесь назад к портрету->, не изменяют размер назад.
4. Вращайтесь для озеленения-> все еще в размере для среды.
5. Вращайтесь к портрету-> измененный вниз для установки экрану портрета.
Кто-то может объяснить это поведение??
Я все еще хочу знать, как зафиксировать это и ценить любую помощь.
Спасибо!
Tom.
У меня была такая же проблема на моем 3GS 3.1.3, хотя я не мог заставить его снова стать правильного размера после ландшафтного режима. Но когда я убрал "height=device-height", страница каждый раз уменьшалась правильно. Таким образом, моя мета выглядит так:
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
Я бы хотел иметь возможность использовать атрибут height для блокировки высоты, но кажется, что они не слишком хорошо сочетаются.
Я также столкнулся с проблемой «не масштабирование, когда я вернулся к портретной ориентации».
Я заставил его работать с
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.6, user-scalable=no" />
для базового масштабирования вперед и назад в 3G с iOS 4, когда я меняю ориентацию.
Изначально я использовал «minimum-scale = 1.0», он заработал, когда я заменил его на «initial-scale = 1.0», после того, как увидел здесь предложения.
I Я использую ExtJs (sencha touch), кажется, хорошо
Ext.setup({
tabletStartupScreen: 'images/tablet_startup_768x1004.png',
phoneStartupScreen: 'images/phone_startup_320x460.png',
tabletIcon: 'images/tablet_icon_72x72.png',
phoneIcon: 'images/phone_icon_72x72.png',
icon: 'images/icon_72x72.png',
statusBarStyle: 'black',
glossOnIcon: true,
fullscreen: true,
onReady: function() {
var viewport = null;
var metas = document.getElementsByTagName('meta');
for(var i = 0, length = metas.length; i < length; ++i){
var meta = metas[i];
// already Extjs addedMetaTags
if(meta.name == 'viewport'){
viewport = Ext.get(meta);
break;
}
}
if(null == viewport){
viewport = Ext.get(document.createElement('meta'));
}
if(window.navigator.standalone){
// IMPORTANT!!! not set to height=device-height when iphone standalone mode was ignored "scale" settings
viewport.set({
name: 'viewport',
content: 'width=device-width, initial-scale=0.1, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no'
});
} else {
// IMPORTANT!!! set to height=device-height when !standalone mode; behav window.innerHeight = fullscreen size
viewport.set({
name: 'viewport',
content: 'height=device-height, width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no'
});
}
}
});
другие устройства, совместимые с ...
var watcher = {
handlers: [],
dimentions: {width:0, height: 0},
fullscreenize: false,
orientLandscape: function (){
return 90 === Math.abs(window.orientation);
},
orientPortrait: function (){
return !this.orientLandscape();
},
width: function (){
return this.dimentions.width;
},
height: function (){
return this.dimentions.height;
},
changeDimentions: function (evt){
var self = this;
(function (){
if(self.fullscreenize){
window.scrollTo(0, 1);
}
self.dimentions = Ext.Element.getViewSize();
self.fireOnchange();
}).defer(100);
},
init: function (){
if('onorientationchange' in window){
Event.observe(window, 'orientationchange', this.changeDimentions.bind(this));
} else {
Event.observe(window, 'resize', this.changeDimentions.bind(this));
}
Event.observe(window, 'load', this.changeDimentions.bind(this));
},
fullScreen: function (){
this.fullscreenize = true;
var self = this;
document.observe('dom:loaded', function (){
(function (){
window.scrollTo(0, 1);
self.changeDimentions();
}).defer(100);
});
},
fireOnchange: function(){
var self = this;
self.handlers.each(function (handler){
handler.apply(null, [self]);
});
},
onchange: function (handler){
this.handlers.push(handler);
}
};
watcher.init();
watcher.fullScreen();
aComponent = Ext.extend(Ext.Component, {
initComponent: function (){
watcher.onchange(this.fullscreen.bind(this));
},
fullscreen: function (){
var height = watcher.height();
var width = watcher.width();
this.menu.setHeight(40);
this.mainPanel.onResize(height - 40, width);
}
});