1

何らかの理由で、iPhone 5 は、サイトを縦向きから横向きに、またはその逆に回転させても、サイトのレイアウトを変更しません。そのため、ページが縦向きで読み込まれると、定義した縦向きのメディア クエリが開始され、サイトが調整されますが、ページが回転された場合、レイアウトは縦向きに最適化されたままになります。ただし、ページを手動で更新すると、横向きのビューが読み込まれますが、電話を回転させても、再度更新しない限り縦向きに変わりません。

私のCSSドキュメントの基本的なコードは次のとおりです。

/* Normal CSS for Desktop Site*/

@media only screen and (orientation:landscape) and (max-device-width: 568px), (max-width: 568px){

/*iPhone 5 Landscape Styles */

}

@media only screen and (orientation:landscape) and (max-device-width: 480px), (max-width: 480px){

/*iPhone 4/4s Landscape Styles*/

}

@media only screen and (orientation:portrait) and (max-device-width: 320px), (max-width: 320px){

/*All iPhones Portrait Styles*/

}

そして、これは<head>私のHTMLファイルからのものです:

<!-- WEB APP META -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<meta name="apple-mobile-web-app-capable" content="yes" /> 
<meta name="apple-mobile-web-app-status-bar-style" content="black" />  
<link href="/img/webapp/default-iphone5.png" media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image" />
<link href="/img/webapp/default-iphone@2x.png" media="(device-width: 320px) and (device-height: 480px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image" />
<link rel="apple-touch-icon" sizes="114x114" href="/img/webapp/touch-icon-114.png" />

この問題は、iPhone 5 でのみ発生します。メディア クエリは、他の iPhone でも期待どおりに機能します。私は周りを検索してコードをいじりましたが、何も機能していないようです。

ご覧になりたい場合 は、Webサイトのリンクはこちらです。注: ホームページのみが機能します

前もって感謝します。

4

2 に答える 2

0

コンマを覚える必要があります。 

  @media only screen 
  and (min-device-width : 320px),
  and (max-device-width : 568px),
  and (orientation : portrait) { /* Style*/ }
そうでなければ、私たちはまだ同じ場所にいて、どうやってそれが可能なのか疑問に思っていました.D：

于 2018-04-02T20:00:45.687 に答える