IPhone用のこのMETAタグを使用した非常にシンプルなHTMLページがあります。
<meta name="viewport" content="height=device-height,width=device-width,initial-scale=1.0,user-scalable=no" />
IPhone Safariを使用すると、ページがポートレートモードで読み込まれると、見た目がよくなり、画面に幅が収まります。 iPhoneを横向きモードに回転させると、横向きの幅に合わせてWebページのサイズが自動的に変更されます。良い、これは私が欲しいものです。
しかし、横から回転して戻すと、ページは以前のようにポートレートの幅に合わせてサイズ変更されません。横幅のままです。
横向きモードの場合と同じように、iPhoneで自動的に正しい幅に設定し直したい。これらはすべて自動的に行われ、さまざまなモード用の特別なスタイリングがないため、これにはオリエンテーションリスナーが関係するとは思わない。
IPhoneがWebページのサイズをポートレートモードに戻さないのはなぜですか?どうすれば修正できますか?
なんとかiPhoneのサイズを自動で縮小することができましたが、偶数回の回転後にのみそれを行うという奇妙な現象がありました...非常に非常に奇妙です。
このMETAタグを使用します。
<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。縦に回転->縦画面に合わせてサイズを変更します。
誰かがこの動作を説明できますか?
まだこれを修正する方法を知りたいと思います。
ありがとう!
トム。
これはiOS 4 Safariのバグでなければなりません。以下は、次のメタタグでの私の動作です(2番目のタグは、全画面表示にすることです)。
<meta name="viewport" content="user-scalable=no, width=device-width"/>
<meta name="Apple-mobile-web-app-capable" content="yes"/>
ポートレートからランドスケープに移動するときに、ポップアップキーボードを使用してフィールドに値を入力するまで、ページは正しくスケーリングされ、スケーリングが停止します。つまり、横向きでキーボードを使用すると、ポートレートに行ったときにキーボードが大きすぎる、またはその逆になります。
次のメタタグを使用して切り替えると、修正されました...このページの他の回答に感謝します。
<meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, width=device-width"/>
<meta name="Apple-mobile-web-app-capable" content="yes"/>
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属性を使用して高さをロックできるようにしたいのですが、うまく混合されていないようです。
もう1つ追加する必要がありますminimum-scale=1.0
したがって、次のようになります。
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0" />
私はExtJ(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);
}
});
また、「ポートレートに戻ったときに縮小しない」問題に遭遇しました。
私はそれを働いてもらいました
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.6, user-scalable=no" />
iOS 4を搭載した3Gでの基本的なスケーリングの前後で、向きを変えます。
私はもともと「minimum-scale = 1.0」を使用していましたが、ここで提案を見た後、「initial-scale = 1.0」に置き換えたときに機能するようになりました。
ビューポートディレクティブを設定するだけです...
<meta name="viewport" content="height=device-height, width=device-width, minimum-scale=1.0, user-scalable=yes|no" />
... JavaScriptを使用する必要はありません。ユーザーは必要に応じてページをスケーリングできます。
これを試して <meta name="viewport" content="width=1024" />
HTMLではなくXHTMLを使用していますか?
これを試して、最初のmeta
タグを正しく閉じてください。
<meta name="viewport" content ="user-scalable=no, width=device-width"/>
<meta name="Apple-mobile-web-app-capable" content="yes"/>
JQuery Mobile 1.3.0でも同じ問題に直面しました。以下を使用し、うまくいきました。
CSS
body { /* IOS page orientation change resize issue*/
-webkit-text-size-adjust: none ;
}
それでもヘッダー/フッターのサイズが正しく変更されない場合(オプション)
$(window).resize(function() {
$("div[data-role=header]").width($(window).width());
$("div[data-role=footer]").width($(window).width());
});
IPhone 5でも同じ問題がありました。答えは信じられないほど簡単でした。
<meta name="viewport" content="width=device-width" />
これにより、常にどちらかのビューでページが適切に表示され、スケーラビリティが提供されます。
これはiOS 5以前のSafariのバグです(A.K.A. Safari Viewport Scaling Bug)。
ズームジェスチャを無効にするメタビューポートタグによる修正を避けるようにしてください。代わりに、次のJavaScript修正プログラムを使用します。
https://Gist.github.com/901295
このバグの詳細: http://webdesignerwall.com/tutorials/iphone-safari-viewport-scaling-bug