現在、流動的/柔軟性のないWebサイトがあります（ビューポートのサイズに応じてレイアウトが変更されないため）。
デスクトップに表示すると、画面全体に表示されます（中央揃えになります）。ただし、iPhoneやiPadなどの他の画面サイズで表示すると問題が発生します。ウェブサイトのレイアウトは問題ないように見えますが、画面全体に表示されないか、側面が途切れているだけです。
を使用してみ<meta name="viewport" content="width=[value]">ましたが、一度に1つのデバイスでしか機能しません（iPhoneまたはiPad、同時に両方では機能しません）。
使用されているビューポートに合わせてWebサイトをスケーリングするコードは1つありますか？
レスポンシブデザインに関しては、目前の問題に取り組むための多くの創造的な方法があります。
パーセンテージを使用して、デザインの応答性を高めることができます。パーセンテージを使用することは、ユーザーのビューポートを最大化するための安全な方法です。
例えば。
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要素の幅、高さ、マージンのルールを調整します。
お役に立てれば！
このメタタグと組み合わせたスニファー機能はうまく機能します。
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
初期スケールを1に設定してみましたか