3

だから、私は自分のサイトの「モバイル」フレンドビューをしたいと思っています。その液体はすでに設計されていますが、モバイルには間違いなく異なる外観が必要です. さて、モバイル（iphone、ipad、android）でアクセスしたかどうかを検出する方法は？より具体的には、画面の幅が値よりも小さいかのように想像します（その値はわかりません）、それはモバイルクライアントと見なされます。モバイルに最適化された CSS/HTML 出力を生成するように検出する方法は? 単純すぎるかもしれませんが、私にとってはモバイル クライアント = 小さい画面であり、それ以上のものではありません

4

2 に答える 2

1

本当に素晴らしい方法はありません。以前は、特定のピクセル数以下の場合、それは電話であると言うことができました。しかし現在、携帯電話はピクセル数が増えているだけでなく、非常に大きなスクリーンも搭載されています。タブレットは現在 7 インチと小さいですが、さらに小さくなる可能性があります。一部のスマートフォンは 5 インチを超え、さらに大きくなる可能性があります。次に、考慮すべき物理ピクセルと CSS ピクセルの比率などがあります。

画面サイズやピクセル数ではない場合、タッチをサポートしているかどうかが原因かもしれません。しかし、デスクトップでのタッチをサポートする Windows 8 は、それを覆しました。

デバイスよりもコンテンツに依存すると思います。さまざまな幅を使用してサイトをテストします。コンテンツの幅が最適でなくなるタイミングを確認し、そこにメディア クエリを投入してレイアウトを調整します。私は、デバイス ファースト戦略よりもコンテンツ ファースト戦略の方が将来性が高いと考えています。

また、モバイル フレンドリーなレイアウトが必要なのはモバイルだけではないことも覚えておいてください。たとえば、semoone はフルスクリーンではなく小さなウィンドウでブラウザーを使用している可能性があります。または、幅が 320px の iPhone の幅と同じである Windows 8 でスナップモードを使用している可能性があります。

于 2013-05-17T00:11:57.873 に答える
1

メディア クエリを使用します。次に、モバイル デバイスを使用している場合はブラウザがモバイル CSS をロードし、PC を使用している場合はブラウザが PC バージョンの CSS をロードすることを検出できます。

http://www.w3.org/TR/css3-mediaqueries/

次に、モバイル デバイスの CSS を次のように開発できます (モバイル デバイスのピクセル数が 480x640 であるとします)。

@media screen and (max-device-width:480px){
    ...
    put your mobile device CSS code here
    ...
}

タブレット (1.024x768 ピクセル) 用の CSS を開発するとします。

@media screen and (max-device-width:1024px) and (orientation:portrait){
    ...
    put your tablet device CSS code here when tablet has portrait orientation. 
    ...
}

@media screen and (max-device-width:1024px) and (orientation:landscape){
    ...
    put your tablet device CSS code here when tablet has landscape orientation. 
    ...
}

PC の場合 (1280x968 ピクセル):

@media screen and (max-device-width:1280px){
    ...
    put your PC CSS code here
    ...
}
于 2013-05-17T00:21:39.483 に答える