5

質問がありますが、さまざまな部分で質問されていますが、iOS と android で適切に機能する簡潔で実用的な回答をまだ見つけていません (現在、iPad、iPad2、Android フォン、および iPod Touch で具体的にテストしています)。 . だから私が持っているのは、うまく機能するスケーラブルなサイトです。サイトの最小幅が 480px、最大幅が 1014px で、その間の幅はそのままになるように指定できるようにしたいと考えています。これが私の現在のコードです：

viewportWidth は window.screen.width によって計算されます minwidth は変数 (480) maxwidth は変数 (1014) です

以下のコードは、トリガーされているデバイスの回転イベントで呼び出されます。

注：私が試したことを示すために、コメント付きのコードの一部を以下のソースに残しました

私のコードは機能しますが、小さなデバイスでは、ページがビューポートの外側にあるため (そうすべきではありませんが)、少しズームアウトする必要があります。場合によっては数回回転させるとこれが修正されます...

/*Set initial Sizes*/
        if( viewportWidth > maxWidth){
            //dont adjust since it may be desktop
            viewportWidth = maxWidth;
            $('meta[name="viewport"]').attr('content', 'initial-scale=1.0; width=device-width'  );


            //viewport = document.querySelector("meta[name=viewport]");
            //viewport.setAttribute('content', 'width=' +  maxWidth + '; initial-scale=1.0; user-scalable=1;');

        }else if( viewportWidth > minWidth && viewportWidth < maxWidth ){
            $('body').removeClass('mobile');
            $('body').addClass('desktop');
            $('meta[name="viewport"]').attr('content', 'initial-scale=1.0; width=device-width' );

            //viewport = document.querySelector("meta[name=viewport]");
            //viewport.setAttribute('content', 'width=' + window.screen.width + '; initial-scale=1.0; user-scalable=1;');

            isMobile = 0;

        }else if( viewportWidth <= minWidth ){  

            if( /iPhone|iPad|iPod/i.test(navigator.userAgent)  ) {
                $('meta[name="viewport"]').attr('content', 'initial-scale =' + (window.screen.width / minWidth ).toFixed(2)  ); 
            }else{
                $('meta[name="viewport"]').attr('content', 'initial-scale = '  + (window.screen.width / minWidth ).toFixed(2)  + '; width=device-width');
            }

            //viewport = document.querySelector("meta[name=viewport]");
            //viewport.setAttribute('content', 'initial-scale = '  + (window.screen.width / minWidth ).toFixed(2)  + '; width=' + minWidth  + '; initial-scale=1.0; user-scalable=1;');

            $('body').removeClass('desktop');
            $('body').addClass('mobile');

            //$('#pageBody').width(minWidth );
            viewportWidth = minWidth ;

            isMobile = 1;   

        }
4

1 に答える 1

10

誰も答えなかったので、これはうまくいくものです

1, css にメディア クエリを使用する 2, このスクリプトを使用してズームを修正する

<meta id="Viewport" name="viewport" width="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">

<script type="text/javascript">
$(function(){
if( /Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent) ) {
  var ww = ( $(window).width() < window.screen.width ) ? $(window).width() : window.screen.width; //get proper width
  var mw = 480; // min width of site
  var ratio =  ww / mw; //calculate ratio
  if( ww < mw){ //smaller than minimum size
   $('#Viewport').attr('content', 'initial-scale=' + ratio + ', maximum-scale=' + ratio + ', minimum-scale=' + ratio + ', user-scalable=yes, width=' + ww);
  }else{ //regular size
   $('#Viewport').attr('content', 'initial-scale=1.0, maximum-scale=2, minimum-scale=1.0, user-scalable=yes, width=' + ww);
  }
}
});
</script>
于 2013-01-05T20:42:01.670 に答える