0

私のサイトは 800px から 1280px の間の流動的なデザインです。（現在、多くのディスプレイ解像度がこれを超えていることに感謝しています）。

10 インチのタブレットでは、ビューポートの幅を 800px に設定するとサイトが最適に表示され、タブレットはこれをウィンドウ サイズに合わせてスケーリングできます。このように、フォントはまともなサイズであり、小さなディスプレイの場合、画像はぼやけの影響をあまり受けません.

デスクトップ ブラウザはビューポート メタ タグを無視し、800px から 1280px の間で表示し、背景はこれを超えます。

ただし、Windows 8 の IE10 は、デスクトップとタブレットの両方にビューポート タグを実装しているため、デスクトップに 800px レイアウトを実装しています。これにより、大きなディスプレイでは許容できないほどぼやけた画像と巨大なテキストが表示されます。

CSS を使用して、私が見つけることができた最良のアプローチは次のようなものです (Windows サーフェスの幅が 1366px であると仮定します):

@media screen and (max-width: 1023px) {
    @-ms-viewport { width: 800px; }
}

@media screen and (min-width: 1024px) and (max-width: 1366px) {
    @-ms-viewport { width: 1024px; }
}

@media screen and (min-width: 1367px) {
    @-ms-viewport { width: device-width; }
}

これは、ディスプレイの解像度が 1366px を超えない限り、デスクトップの画像とテキストがズームされることを意味します。Surface のネイティブ解像度が多くのデスクトップと似ていることを考えると、メディア クエリで max-device-width を使用してもあまり効果がないように思われます。

または、タブレットを検出して Javascript でビューポート幅を設定するか、PHP で検出して別のスタイルシートを配信することもできます。

できればCSSを使用して、これを行うためのより良い方法があることは間違いありませんか?

ありがとう、提案に感謝します。

4

0 に答える 0