モバイルデバイスを目的としたブランディングWebサイト
現在、モバイル向けに最適化されているはずのウェブサイトに取り組んでいます。
クライアントから、モバイルバージョンのWebサイトの外観のレイアウトが提供されました。デザインの願いを叶えることは大したことではありませんが、デザインを画面に合わせるのは私の問題です。現在、サイトの<body>タグの幅に関するいくつかの問題に直面しています。デザインは640pxの幅に測定されていますが、これにより、サイトの右側に大きなギャップが残ります例えば上の画面iPhoneおよびAndroid電話。
WebサイトはASP.NETおよびC＃で開発されています。使用しているマスターページは1つだけなので、最適化は難しい場合があります。私が提供したデザインは.psdファイルであり、これを拡大して画像などを直接取り出します。問題は、すべてのナビゲーション画像、コンテンツ分割画像などがすべて指定された幅と高さであるため、640pxタグに<body>の幅を設定したことです。
だから私の質問は本当に、ハンドヘルド画面にデザインを合わせる最良の方法は何ですか？ピクセル、em、インチのすべてを忘れて、幅、フォントサイズなどの両方に％を使用する必要がありますか？または、提供されたデザインを「コピー/貼り付け」して、電話の画面解像度を画面の両側にスペースのギャップを残さずにズームを640pxのボディ幅の幅に合わせる方法を教えてください。
ハンドヘルドデバイス向けに設計する場合は、次の概念を理解する必要があります
画面サイズ-画面の対角線として測定された実際の物理サイズ。
画面密度-画面の物理領域内のピクセル数。通常はdpi（ドット/インチ）と呼ばれます。
Orientation-ユーザーの視点から見た画面の向き。横向きまたは縦向き
密度非依存ピクセル（dp） UIレイアウトを定義するときに使用する仮想ピクセル単位。レイアウトの寸法や位置を密度に依存しない方法で表現します。密度に依存しないピクセルは、160 dpi画面上の1つの物理ピクセルに相当します。これは、「中」の密度の画面用にシステムが想定するベースライン密度です。
あなたの質問に答えるために：あなたはあなたが開発しているデバイスの画面密度に応じてピクセルでスライスされた画像を提供する必要があり、また向きを考慮する必要があります。基本的に、画面密度は、独自の画面解像度を持つ3つのカテゴリldpi/mdpi/hdpiに分類されます。また、画面密度に応じて、特定の画像セットを読み込むことができます。
PSDレイアウトを「スライス」するため、Webエクスペリエンス、特にモバイルのデザインについてわざわざ自分を怒らせています。デザイナーに「レスポンシブウェブデザイン」と「モバイルファースト」でグーグルし、最新のマルチデバイスウェブのデザインアプローチに関する会話や議論を読むことをやさしく提案することを検討してください。待って、私は怒らないと言いましたね？ごめんなさい。
画面幅、ビューポートの幅、ピクセル密度が異なるさまざまなモバイルデバイスに固定幅のデザインを展開しようとしているようです。残念ながら、これを実現するための「最善の方法」はありません。 www.quirksmode.org で、Peter-Paul Kochのモバイルデバイスとブラウザに関する優れた研究を読むことをお勧めします。具体的には、彼の投稿「 2つのビューポートの物語 」をご覧ください。記事の パート2 のセクション「メタビューポート」に特に注意してください。
PPKで説明されているいくつかの手法を試してみて、さまざまなモバイルデバイスとブラウザでテストしてください。
幸運を！
フォームファクター/解像度を照会してから、対応する画像のセットをロードするのはどうですか？ちょっとした考え。