ID #1066

Mobifyで構築したサイトの右側に余分なスペースが出来てしまい、右へとスクロールしてしまう原因になっています。フローティングコンテンツやdiv要素が原因なのではないかと思うのですが、まだ本当の原因をピンポイントで探し出せておりません。他にもこの問題を抱えている人はいますか?どのようにそれを解決しましたか?

> ChromeのWebkitのインスペクタにはレイアウトをオーバーフローしている要素を追跡するためのいくつかの優れたツールを持っており、簡単に模擬のモバイル機器の画面サイズへと設定することができます。

 

Chromeのインスペクタを使ってmobifyへの適応を確認する良い方法は、次のとおりです。

 

1)もしまだmobifyタグに入れてサイトを公開していない場合はあなたの発行ページ、https://cloud.mobify.com/projects/<your project slug>/bundleをご覧ください。このページで、"See it on your mobile device"の関連リンクがあるので、これをコピーしてください。

 

2)Chromeのシークレットウィンドウを開き、右クリックして、"Inspect Element"を選択してください。インスペクタが開いたら、右下にある歯車のアイコンをクリックし、開発者ツールの環境設定に入り、Override(上書き)タブに移り、iPhoneのユーザーエージェント設定 - iOS 4と320×480に画面解像度を設定する。(iphoneのためのレイアウトエミュレーションが正しい得るために)

 

3)ステップ1からのリンクをご覧いただくか、すでにあなたのサイトを公開した場合、あなたのサイトにアクセスしてください。

4)レイアウトからあふれている要素を探すためにChromeのインスペクタの開発ツールのメトリックパネルを使用します。一般的な原因はハードコーディングされた幅の属性を持つ要素や、デスクトップサイトから持ち込まれたインラインスタイルの要素などです。

タグ: -

関連エントリー:

この FAQ にコメントする