7 
<link rel="stylesheet" media="only screen and (max-width:1280px)" href="css/article1280.css">

レスポンシブ CSS をコーディングしている最中に、Samsung Galaxy S4 スマートフォンの画面解像度が 1080x1920 であることに気付きました。私の 23 インチ モニターは 1920x1080 です。解像度が 320x480 で、これはすべてのスマートフォンが周りにあると思っていたもので、幅が 800 ピクセル未満のどこかです) ので、少し困惑しています. 画面解像度が 1080x1920 のスマートフォン用のモバイル Web サイトを作成するにはどうすればよいですか?

4

6 に答える 6

20

Galaxy S4 は 360px x 640px をブラウザに報告します

アスペクト比は 9/16

画素比は3

@media screen and (max-device-width: 360px)

@media screen and (-webkit-min-device-pixel-ratio: 3)

@media screen and (device-aspect-ratio: 9/16)
于 2013-07-25T18:59:25.907 に答える
0

この場合に役立つと思われるメディア クエリは次のとおりです。

@media screen and (orientation: portrait | landscape) { ... }

@media screen and (device-aspect-ratio: #/#) { ... }

詳細情報へのリンクは次のとおりです: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries

于 2013-06-04T17:13:21.990 に答える
0

GS4 でデザインする場合、ヘッダーで viewport タグを使用しない限り、通常のワイドスクリーンとしてレンダリングされます。レスポンシブにするために使用する例を @ Samsung Galaxy S4 Responsive Design @mediaに投稿しました

于 2014-07-03T00:27:03.247 に答える
0

テスト済みで動作しています！

@media screen and (-webkit-min-device-pixel-ratio: 3.0) and (max-width: 1080px), screen and (max-width: 480px)
于 2016-02-25T06:43:27.660 に答える
0

head セクションに viewport メタ タグがあることを確認してください。このようなもの：

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

これにより、ユーザー エージェントは、ピクセル密度を考慮し、それに応じて再スケーリングするように指示されます。したがって、幅 1080 ピクセルの Samsung Galaxy S4 は、幅 360 ピクセルの画面のように動作します。

于 2015-12-01T23:30:34.830 に答える