web-dev-qa-db-ja.com

iPadが縦向きの場合、Mobile Safariビューポートの幅を縮小しますか？-

私はiPadで横向きモードで表示したときに最もよく機能するように設計されたWebサイトに取り組んでいます。すべてが1024px幅の<div>コンテナに入っています。ただし、ビューポートを縮小する必要があるため、ユーザーがiPadを縦向きにしたときに、ページ上のすべてを表示するためにズームアウトしたり、水平方向にスクロールしたりする必要はありません。

現在、<meta>にこの<head>タグがあります。

<meta name="viewport" content="width=1024px, initial-scale=1.0, maximum-scale=10.0" />

ページを横向きモードで表示すると、すべて正常に表示されますが、上記の必要な縦向きの動作を機能させることができません。 initial-scaleを0.75に変更しようとすると、まったく逆のことが起こります。すべてが縦向きモードに収まりますが、iPadが横向きモードの場合は余分な水平方向のスペースがあります。

これを機能させるために使用できるCSS、Javascript、または特別なビューポート設定はありますか？

P.S. user-scalable=noは使用できません。

cssiosipadmobile-safariviewport
14
Phil

デスクトップブラウザに使用するのと同じCSS内に方向プロパティを追加することもできます...以下を追加する必要があります。

@media only screen and (device-width:768px)and (orientation:portrait)
/*iPad Portrait orientation styles */

@media only screen and (device-width:768px)and (orientation:landscape)
/*iPad landscape orientation styles */

繰り返しになりますが、iPadの場合、デバイスの幅は向きに関係なく常に768pxです...紛らわしいことはわかっていますが、それがその方法です...

http://iTunes.Apple.com/in/app/designmobileweb/id486198804?mt=8 で同じチュートリアルをチェックすることもできます。

14
testndtv

次のような方向固有のCSSを使用できる場合があります。

<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css">
<link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css">

その場合、ビューポート設定をデバイスの最大幅に設定し、CSSを使用してコンテンツの実際の幅を処理する必要があります。たとえば、すべてをdivで、各方向に適切な幅、1024pxまたは768pxでラップします（ステータスバーとブラウザを除くchromeが必要です）。

<meta id="viewport" name="viewport" content="initial-scale=1.0;minimum-scale=1.0; maximum-scale=1.0" />
3
John Kramlich