サポート » 使い方全般 » iOSとAndroidでが画面表示幅が異なる

  • テーマraindrops1.211でレスポンシブでサイトを構築しました。
    Androidのスマホで表示させると、予期した通りの表示になりますが、iOSのiphoneでは、画面右に大きめの余白が出たり、ページによっては画面の半分くらいの幅になってしまいます。
    確認すべきところはどんな部分があるでしょうか?
    <head>内に
    <meta name=”viewport” content=”width=device-width”>
    は記述してみましたが、状況は変わりません

9件の返信を表示中 - 1 - 9件目 (全9件中)
  • モデレーター Daisuke Takahashi

    (@extendwings)

    Androidの標準ブラウザをお使いという解釈でよろしいでしょうか。サイトのURLがわからないのでChromeなどの他のブラウザで検証してみないと何とも言えないです。

    トピック投稿者 kashiwa

    (@kashiwa)

    お返事ありがとうございます。
    Androidは標準ブラウザです。
    iOSは、Safari、Chromeとも予期した表示になりません。
    サイトは、http://www.onsen-cafe.comです。

    こんにちは、

    Raindropsの制作者です

    fluid レスポンシブレイアウトで表示した場合以下のmeta要素が追加されます

    <meta name="viewport" content="width=device-width" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="default" />

    これ以外の、固定ページ幅750px,950px,974pxの場合は、これらの要素は追加されません。

    さて、Raindropsの設定状況を確認させていただきたいのですが、

    配色タイプ
    ページ幅
    サイドバーの幅と位置
    エキストラサイドバー
    エキストラサイドバー 幅
    アクセシビリティ設定
    html文書型設定

    上記の設定は、ブラウザ表示に影響を与える主要設定ですのでそれらの設定をお知らせください。

    さらに、

    http://validator.w3.org/

    にて、kashiwaさんのWEBサイトの検証結果をお知らせください。

    トップページと、ページによっては画面の半分くらいの幅になってしまったページ

    もし、サイトのURLを提示していただけるのであれば、こちらでも確認してみます

    カスタマイズを行っておられるようでしたら、プラグインやコードの追加等の概要を教えていただけるとうれしいです

    URLをお知らせいただいたので、設定等のお返事は回答いただかなくても、大丈夫です

    プラグインや、カスタマイズの内容について教えてください

    トピック投稿者 kashiwa

    (@kashiwa)

    ありがとうございます!

    http://validator.w3.org/ でエラーが9、ワーニングが3出てしまったのでそれをコレから検証します。

    有効にしているプラグインは
    JetPack for WordPress
    Movable Type and TypePad Importer
    Postie
    RSS Antenna
    WordPress SEO
    WP Multibyte Patch
    WP Social Bookmarking Light
    です

    トピック投稿者 kashiwa

    (@kashiwa)

    http://validator.w3.org/
    からのエラーを見たところ、予期しない<p>や</p>タグが入っているようでした。

    p要素が、不適切に追加される問題は、バージョンによって微妙に異なります

    http://ja.forums.wordpress.org/topic/24066?replies=2

    <div class="eigyo-right2"><!-- トリップアドバイザ --></p>

    3.9.1や開発版の4.0では、追加されないようです

    <div class="eigyo-right2">
    
    <!-- トリップアドバイザ -->

    等のように書き換えてみると改善するかもしれないです。

    不具合が発生している 投稿やページ を教えていただけますか?

    プラグインなしで、カスタマイズをしていないRaindropsでも、不具合は再現しますか?

    トピック投稿者 kashiwa

    (@kashiwa)

    ありがとうございます。

    不具合が出ているのはトップページ http://www.onsen-cafe.com です。

    v3.9.1に上げたりしましたが、結果的には、<iframe>で入れたfacebookのウィジェットが原因のようで、この部分をコメントアウトしたら表示が直りました。

    これから原因を追求しようと思います。

    ただ、<p>タグが勝手に入ってしまうのは、3.9.1でも同じようです。

    facebookウィジェット
    <iframe style=”border: none; overflow: hidden; width: 100%; height: 590px;” src=”//www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2FKashiwayaCafe&width=600&height=590&colorscheme=light&show_faces=true&header=true&stream=true&show_border=true” width=”300″ height=”150″ frameborder=”0″ scrolling=”no”></iframe>

    ただ、<p>タグが勝手に入ってしまうのは、3.9.1でも同じようです。

    この忌々しい、p要素の挙動は、div select td等の内側で起こることが多く、改行があるなし等によって微妙に変化するので ケースバイケースで対応するしかないかもしれません。

    原因が特定できてよかったです

    Raindropsよろしくです

9件の返信を表示中 - 1 - 9件目 (全9件中)
  • トピック「iOSとAndroidでが画面表示幅が異なる」には新たに返信することはできません。