2017-02-08 6 views
0

ウェブサイトは数ヶ月前にはうまくいきました。突然、iPhoneはcssファイル内で単一のメディアクエリを読み込んでいません。私は以下を行った:iPhoneはすべてのメディアクエリを無視します

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> 

私のHTMLファイルに含まれています。

私のCSSファイルに含ま
/* Iphone 6 plus portrait & landscape */ 
@media only screen and (min-device-width : 414px) and (max-device-width : 736px) { 

次のことをしようとしました:

@media all and (min-device-width : 414px) and (max-device-width : 736px) { 

and (-webkit-min-device-pixel-ratio : 3) 

and (min-resolution: 401dpi) 
and (device-aspect-ratio:16/9) 

何もありません。

CSSファイルがロードされていることを確認しました。

Chromeでサイトをチェックすると、Windows PCでiPhone 6以上の解像度でサイトが完璧に見えます。しかし、私が試したすべてのiPhoneシミュレーターだけでなく、クライアントも、メディアクエリーを表示していません。私は実際にiPhoneを持っていませんが、クライアントはします。

誰でもこの現象が起こる可能性がありますか教えてください。何が欠けていますか?助けてください。

答えて

0

明らかに、解決策は、(max-width)/(min-width)を最大デバイス幅と最小デバイス幅の両方に追加することでした。これによりクエリが作成されました。

@media only screen and (min-device-width : 414px) 
and (max-device-width : 736px) 
and (orientation : portrait), 
only screen and (min-width: 414px) 
and (max-width : 736px) and (orientation : portrait) { } 

これはシミュレータ上で動作しており、さらにテストし、必要に応じて追加します。

関連する問題