主にモバイル デバイスで、私の Web ページでいくつかの問題が発生していますが、デスクトップ デバイスにも影響します。これらの問題を解決できる人に (stackoverflow が許可する場合は) 喜んで報奨金を授与します。
HTML: http://pastebin.com/raw.php?i=bbFsMcwT
CSS: http://pastebin.com/raw.php?i=SGMwt3cs
JSFiddle: http://jsfiddle.net/D8SJD/
- 問題 1 - 左右のスクロール イメージ ボタン
- 現在、左右のスクロール画像ボタンはhtmlを使用して行われて
onmouseover
おりonmouseout
、それらをcssベースの「ボタン」に変換できるようにしたい
- 現在、左右のスクロール画像ボタンはhtmlを使用して行われて
- 問題 2 - 動的解決
- ヘッダーとフッターは、解像度が異なると動的ではありません。たとえば、1680x1050 のモニターでデザインされたページを作成しました。デスクトップ 1680x1050ですが、ウィンドウを小さくすると、デスクトップの小さなウィンドウのようになります。
- デフォルト ズームの Nexus 4 携帯電話では、次のように表示されます。モバイル オリジナル ズーム
- Nexus 4 携帯電話を可能な限りズームアウトすると、次のように表示されます: Mobile Max Distance
- Nexus 4 をズームアウトして一番下までスクロールすると (ブラウザの URL バーが非表示になります)、次のようになります: URL バーなしでズームアウト (実際の Web ページのフッターが非表示になります)
- Nexus 4 をズームアウトして一番下からスクロールすると (ブラウザの URL バーが表示されるようになります)、次のようになります: URL バーでズームアウト( フッターが戻る) 。
- プレースホルダーの画像と矢印は、フッターとヘッダーの中央にあるはずで、画面の解像度に従って縮小する必要があります。
- モバイル デバイスのデフォルトのズーム (可能な場合) を小さくして、より多くの画像を表示できるようにする必要があります。モバイルの元のズームに近づく
Up to Top
とDown to Key
、(可能であれば) 小さくする必要があります。プレースホルダーのロゴは消えます... - この投稿の下部にある画像を参照してください
モバイルデバイスについては、テストのために以下のようなことを試しましたが、どれも機能しませんでした...
@media (max-width: 640px) {
#header > a img {
display: none;
}
}
編集 2013 年 11 月 14 日 @ 01:58GMT
1920x1080 の画面では問題ないように見えますが、以下に示すように、テキストとプレースホルダー画像の間に大きなギャップがあります。
1680x1050 の画面では、「Semi」がどこにあるかをメモして、上の 1920x1080 の画像と比較する方法を大まかに示しています。
600x600 の画面では次のように表示されます。ご覧のとおり、プレースホルダーと左矢印の間に大きなギャップがありますが、右矢印にはギャップがなく、実際にはオーバーフローしています。テキストに関しては、あまりにも遠すぎます。権利。