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>

ピックアップ記事

safariでowl carouselのスライド時にフォントが細くなる現象の解決策

2015年03月19日 jQuery・javascriptweb関連
レスポンシブ対応でとても重宝しているowlカルーセルですが、safariでは、スライド時に、フォントが細くなったり、太くなったりして、点滅するような現象が起こっていました。 iOSのchromeでも同じ現象が起こるらしいのですが、未確認。 …
「safariでowl carouselのスライド時にフォントが細くなる現象の解決策」をはてなブックマークに追加

WordPressのWP-PageNaviが動かない場合の対処法

2012年02月04日 WordPress
WP-PageNaviは、WordPressでページングを可能にしてくれるプラグインですが、以下のように「query_posts」を指定していると、正常に動かないようです。 WP-PageNaviが正常に動かない例 [php]<?php if ( have_posts() ) : query_posts('cat=1&showposts=5' ); ?> [/php] 上記…
「WordPressのWP-PageNaviが動かない場合の対処法」をはてなブックマークに追加

IE6で透過pngを表示させる。DD_belatedPNG

2012年02月14日 jQuery・javascriptweb関連
DD_belatedPNG 先日、でも触れましたが、DD_belatedPNGというjavascriptを使って、IE6で透過pngを表示させてみました。 DD_belatedPNGの入手 以下のサイトにいって、DD_belatedPNGをダウンロードします。以下のサイト内を下へスクロールしていくと、左のサイドバーにDD_belatedPNG 0.0.8a releasedというリンクがあり…
「IE6で透過pngを表示させる。DD_belatedPNG」をはてなブックマークに追加

指定カテゴリに属する子カテゴリ名の一覧を取得(表示)

2011年11月28日 WordPress
以下の例では、カテゴリIDが30のカテゴリを親に持つ、子カテゴリ一覧を表示します。 [php] <?php $categories = get_terms( 'category', array( 'orderby' => 'count', 'hide_empty' => 0, 'child_of' => 30, ) ); foreach($cat…
「指定カテゴリに属する子カテゴリ名の一覧を取得(表示)」をはてなブックマークに追加

Hellod dolly をサイトに表示させてみる

2011年05月26日 WordPress
WordPressには、デフォルトで Hello Dolly という意味不明なプラグインが入っていますが、あまりにも意味不明なので、サイトに表示してみましょう (/_・)/ 以下は、Hello Dolly の説明です。 Hello Dolly(ハロー・ドリー) これはただのプラグインではありません。ルイ・アームストロングによって歌われた最も有名な二つの単語に要約される、同一世代のすべての人々の希…
「Hellod dolly をサイトに表示させてみる」をはてなブックマークに追加
© graffiti on the web . All rights reserved. WordPress Theme by comfy