jqueryを使用してIpadとIphoneのビューポートの正しい幅を取得するにはどうすればよいですか? 私の Web ページは iPad のネイティブ サイズよりも大きいため、縮小されます。私がやろうとしているのは、コンテンツ div を各ブラウザーの幅に設定してから、概要を非表示に設定することです。これは、デスクトップ ブラウザーで機能します。Ipad または Iphone でテストすると、IOS のスケーリングのために別の話になります。そのスケーリングを維持したいが、正しい幅を取得できるようにしたい。width と outerWidth() の両方を試しましたが、運がありません。
$(window).resize(function() {
$('#content').css({width: $(this).outerWidth()});
});
CSSでパーセンテージを使用しないのはなぜですか?
たとえば、次の例で行っているのと同じことを実現できます。
#content { width: 100%; }
編集: また、さまざまなデバイスでさまざまなことを達成したい場合は、CSS メディア クエリとレスポンシブ デザインについて読むことをお勧めします。
たとえば、Web サイトの全体表示で、コンテンツが幅の 70% を占有し、サイドバーが残りを占有するとします。しかし、誰かがスマートフォンから Web サイトを表示する場合、コンテンツがページの全幅を占有し、サイドバーがその下に全幅で表示されるようにする必要があります。あなたはそのようにすることができます：
.main-content { width: 70%; float: left; }
.sidebar { width: 30%; float: left;}
@media screen and (max-width: 500px) {
.main-content, .sidebar { width: 100%; }
}
これを試しましたか：
$( window ).height();
$( window ).width();