38

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" />

自動サイズ変更するために私がしなければならないことは次のとおり
です。
2. 横向きに回転 -> 画面に合わせてサイズ変更。
3. 縦向きに回転 -> サイズ変更なし。
4. 横向きに回転 -> 横向きのサイズのまま。
5. 縦向きに回転 -> 縦向きの画面に合わせて縮小します。

誰かがこの動作を説明できますか??
私はまだこれを修正する方法を知りたいと思っています。

ありがとう!
トム。

4

11 に答える 11

31

これは 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"/>
于 2010-09-29T00:35:26.240 に答える
4

私の 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" />

高さ属性を使って高さをロックできるようにしたいのですが、うまく混ざっていないようです。

于 2010-05-03T22:09:42.753 に答える
3

minimum-scale=1.0次のように、もう 1 つ追加する必要があります。

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0" />
于 2011-09-19T06:27:55.140 に答える
2

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);
  }
});
于 2010-07-20T11:25:11.390 に答える
1

これを試して <meta name="viewport" content="width=1024" />

于 2011-09-15T02:21:10.247 に答える
1

また、「ポートレートに戻ったときに縮小しない」という問題にも遭遇しました。

私はそれで動作しました

<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」に置き換えると機能しました。

于 2010-07-02T11:13:08.233 に答える
1

ビューポート ディレクティブを次のように設定するだけです...

<meta name="viewport" content="height=device-height, width=device-width, minimum-scale=1.0, user-scalable=yes|no" />

...JavaScript を使用する必要はなく、ユーザーが必要に応じてページをスケーリングできるようにすることもできます。

于 2011-09-28T11:26:08.297 に答える
0

これは、iOS 5以前のSafariのバグです(別名Safariビューポートスケーリングバグ)。

ズームジェスチャを無効にするメタビューポートタグによる修正は避けてください。代わりに、次のJavaScript修正を使用してください:
https ://gist.github.com/901295

このバグの詳細:http ://webdesignerwall.com/tutorials/iphone-safari-viewport-scaling-bug

于 2012-08-29T11:40:40.763 に答える
0

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());
});
于 2013-05-17T11:38:47.563 に答える
0

HTML ではなく XHTML を使用していますか?

metaこれを試して、最初のタグを正しく閉じていることを確認してください。

<meta name="viewport" content ="user-scalable=no, width=device-width"/>
<meta name="apple-mobile-web-app-capable" content="yes"/>
于 2012-05-07T18:02:08.560 に答える
0

iPhone 5 でも同じ問題がありました。答えは信じられないほど簡単でした。

<meta name="viewport" content="width=device-width" />

これにより、常にどちらのビューでもページが適切に表示され、スケーラビリティが提供されます。

于 2013-02-13T18:55:48.503 に答える