0

サイトアドレス：straightace.com

次のコードを使用しました。

    <meta name="viewport" content="initial-scale=1,
                    user-scalable=yes,maximum-scale=0.6,width=device-width"> 
    <meta name="viewport" content="height=device-height,width=device-width">

目的は、垂直または水平に向けられたiPadで1085ピクセル幅のページを読み込むことでした。モバイルサイトにリダイレクトされ、現時点ではAndroidタブレットについて心配していない、幅699ピクセル未満のデバイス用に別のスクリプトがあります。どちらの方向でもページをロードするとき、および水平方向にロードして垂直方向に回転するときでも、すべてがスムーズに進みます。

問題は、ページを垂直方向にロードして水平にすると、ページが左に押され、画面の右側に大きな黒いバーが表示されることです。リフレッシュすると、バーが消えます。

ビューポートの機能を維持しながら、黒いバーを削除するのを手伝ってくれる人はいますか？

4

2 に答える 2

0

このコードは役立つかもしれません:

<meta name="viewport" content="width=device-width,height=device-height, initial-scale=.5">

つまりmaximum-scale、コードから属性を削除します。

于 2013-04-04T19:19:43.260 に答える
0

これが簡単な解決策です：

<meta name="viewport" content="initial-scale=1,maximum-scale=1" />

シンプルですが、このソリューションはピンチズームを効果的に無効にします。ユーザーがズームできるようにしながら、このビューポートの回転の問題を修正するさまざまな Javascript ソリューションがあります。 これは私のために働きます。

<script type="text/javascript">
(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 ));
</script>
于 2013-08-13T15:01:38.823 に答える