2013年11月13日 jQuery・javascriptWordPress

Twitter Bootstrapを使用して、レスポンシブなウェブサイトを制作していたのですが、iPhoneで縦画面、横画面での表示を繰り返すと画面からはみ出してしまう(拡大表示した時のように画面内にサイトが収まっていない)現象に悩まされました。

もちろん、縦でも横でも画面横幅ピッタリにサイトが表示されるのが理想なので、調べてみました。

今回使用していたのは、Bootstrap v3.0.2、で、それ以前のv2.3.2で作ったサイトは縦横に回転を繰り返しても問題なく表示されていました。

ちなみに、viewpointの設定は、以下の設定でした。

<meta name="viewport" content="initial-scale=1.0,width=device-width" />

スマホサイトの幅は特別に設定しておらず、metaのviewpointの関係か、Bootstrapのresponsive.cssか、と思って調べると

  1. 横幅が画面をはみ出すようなサイズの画像やdivなどをpx指定している場合は、画面からはみ出すことがある
  2. スマホ自体の拡大縮小を制御または、不可にすれば解決する。user-scalable、maximum-scale

などがあったのですが、画像などはpx指定してないし、スマホでの拡大縮小など、ユーザーの閲覧に制限をつけるのも嫌だったので、どちらも違うなぁと思っていたら、海外の掲示板ですが、同じ症状で困っている方がいました。

Bootstrap responsive css and/or viewport issue/bug on rotation of a device
html, body {
    overflow-x: hidden;
}

cssに上記の設定を追加するだけで理想通りに動くようになりました。

これがBootstrapのバグなのか、私の使用方法にマズイ点があるのか、はっきり分からないままなので、気になりますが、とりあえず、問題は解決出来たので一安心です。

この投稿へのコメント

コメントはまだありません。

コメントを残す

メールアドレスが公開されることはありません。

次のHTML タグと属性が使えます。
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

ピックアップ記事

WordPressのオリジナルテーマのサムネイル作成

2013年11月06日 web関連WordPress
WordPressでオリジナルのテーマを作る時は、テーマ名などはstyle.css内にコメントで設定。 管理画面の外観>テーマのページに表示される、個々のテーマのサムネイル画像は、ファイル名「screenshot」、形式はPNG/JPEG/GIFのどれかにして、サイズは 300×225pxで作成。 http://wordpress.nyamuh.com/cont/base/base.htm…
「WordPressのオリジナルテーマのサムネイル作成」をはてなブックマークに追加

WordPressでindex.htmlとindex.phpを混在させる

2011年06月14日 WordPress
なんともない話題ではありますが、既存のサイトを公開したまま、index.phpの方で、WordPressを入れて、リニューアルをと思ってたんですが、index.phpもindex.htmlもWordPressのホームディレクトリにリダイレクトされてるようです。 どうしたもんかと思ってたら、簡単に解決する方法がありました。 wp-include内のcanonical.phpファイルを開き、270行…
「WordPressでindex.htmlとindex.phpを混在させる」をはてなブックマークに追加

WordPressでアイキャッチ画像を使う

2012年03月02日 WordPress
基本設定 function.phpに以下を追加 以下を追加することで、WordPressでアイキャッチ画像を使うことが可能になります。 これが設定されていないと、管理画面内の投稿ページにもアイキャッチ関連のボックスは表示されないようです。 [php]add_theme_support( 'post-thumbnails' ); [/php] アイキャッチを表示させる アイキャッチを呼び出すには…
「WordPressでアイキャッチ画像を使う」をはてなブックマークに追加

WordPressで記事に画像投稿する際に、自動でクラス名をつける

2013年10月09日 phpweb関連WordPress
記事内の画像をいい感じのエフェクトをつけて拡大表示させるWordPressのプラグイン「Easy FancyBox」というのを導入したのですが、挿入されたaタグやimgタグに固有のクラス名がないので、CSSで調整しづらかったので、リンク付きの画像を挿入したい際に自動でclass名を追加するようにしました。 imgタグにclassを追加する場合とaタグに追加する場合を分けて書きます。 挿…
「WordPressで記事に画像投稿する際に、自動でクラス名をつける」をはてなブックマークに追加
© graffiti on the web . All rights reserved. WordPress Theme by comfy