[WordPress] ワードプレス/HTML コード: 写真ドン ' t モバイル ビューに正しく表示されます

スポンサーリンク

質問

ワードプレスに基づいて,”Mystile”をテーマにしたオンライン ショップを持っている

多くのページ自身の HTML と CSS のコードで作成された、彼らはコンピューターのすべてのブラウザーと画面サイズで非常に良い探しています。テーマの自動モバイル ビューがひどく自己のすべてのコード化されたものを表示しています

例えば: 従ってこのような HTML コードを使用いくつかの写真に並べて表示するかった:

<div style="position: absolute;"><a href="myhref"><img src="myimgsrc" alt="" /></a></div>
<div style="position: absolute; margin-left: 250px;"><a href="myhref"><img src="myimgsrc" alt="" /></a></div>
<div style="position: absolute; margin-left: 500px;"><a href="myhref"><img src="myimgsrc" alt="" /></a></div>

写真を得るあらゆるデスクトップ デバイスは残念ながらない proberly モバイル ビューに並べて表示します

他の主題はトルコパンができますモバイル ビューが、ビューの定義された幅をお知らせ私の写真を得るのモバイル ビューに収まるように表示されるようにします。私の現在のテーマでこれはない場合、モバイル ビューが web サイト全体のコンテンツを取得表示されます明確に定義されているボックスではなく変換の種類だけのようです

私は本当にここで立ち往生、ウェブサイトがコード化された完了し、コンピューターに非常に良く見えますので、任意の表示サイズの電気ショック療法。モバイル ビューは、問題のみ

何をすべきか?

ありがとう !

答え

、Mystile テーマ レスポンシブ テーマであり提示されたサイズは、デバイスに最適なを確認すると呼ばれる「ビューポート」メタ:

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

位置決めあなたの画像を使用しているために応答しませんデバイス幅に絶対配置を使用している (あなたのケースで: 最初のイメージは左の: 0 px、2 つ目は左: 250 px、左から 3 番目です: 500 px)。

行く方法ではない全体的にみて、絶対位置決めがあなたのケースを変更することができるクイックフィックス割合に位置決め基づいてあなたのピクセル ベースの 1 つ:

<div style="position: absolute;"><a href="myhref"><img src="myimgsrc" class="scaleimage" alt="" /></a></div>
<div style="position: absolute; margin-left: 33%;"><a href="myhref"><img src="myimgsrc" class="scaleimage" alt="" /></a></div>
<div style="position: absolute; margin-left: 66%;"><a href="myhref"><img src="myimgsrc" class="scaleimage" alt="" /></a></div>

. のコースを必要な場合は、縮小画像の幅を調整する必要がありますと:

<style type="text/css">
  .scaleimage { max-width: 33%; }
</style>

http://stackoverflow.com/questions/28685564/wordpress-html-code-pictures-dont-get-displayed-properly-on-mobile-view

スポンサーリンク

Leave a Reply