1

現在、流動的/柔軟性のないWebサイトがあります(ビューポートのサイズに応じてレイアウトが変更されないため)。

デスクトップに表示すると、画面全体に表示されます(中央揃えになります)。ただし、iPhoneやiPadなどの他の画面サイズで表示すると問題が発生します。ウェブサイトのレイアウトは問題ないように見えますが、画面全体に表示されないか、側面が途切れているだけです。

を使用してみ<meta name="viewport" content="width=[value]">ましたが、一度に1つのデバイスでしか機能しません(iPhoneまたはiPad、同時に両方では機能しません)。

使用されているビューポートに合わせてWebサイトをスケーリングするコードは1つありますか?

4

3 に答える 3

3

レスポンシブデザインに関しては、目前の問題に取り組むための多くの創造的な方法があります。

パーセンテージを使用して、デザインの応答性を高めることができます。パーセンテージを使用することは、ユーザーのビューポートを最大化するための安全な方法です。

例えば。

html, body { 
height: 100%; 
width: 100%; 
margin: 0; 
}

そこから、サイトコンテナを操作して、より具体的にすることができます。

また、HTMLのヘッドセクションにあるJavaScriptは、画面サイズを検出し、それに応じてさまざまなCSSルールを調整するのに役立ちます。

<!-- hide script from old browsers
//<![CDATA[

var windowWidth=screen.availWidth;
var windowHeight=screen.availHeight

function sniffer() {
var el=document.getElementById("body"); 
if(screen.width<=600) {
               el.style.width='100%';
               el.style.height= windowHeight;
               el.style.margin="auto";               
 } 
}
onload=sniffer;
//]]>
// end hiding script from old browsers -->

上記のJavaScriptは、ユーザーの画面が600px以下かどうかをチェックしています。その場合、body要素の幅、高さ、マージンのルールを調整します。

お役に立てれば!

于 2012-11-29T05:21:04.160 に答える
3

このメタタグと組み合わせたスニファー機能はうまく機能します。 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

于 2014-05-19T22:21:53.630 に答える
0

初期スケールを1に設定してみましたか

于 2012-12-04T23:51:28.807 に答える