Webの記録

Androidでp要素などが、勝手に改行されて幅が狭くなった時にしてみたこと。

投稿日:2014年5月7日 更新日:

この記事は約 2 分で読めます。

android_mini

PCと同じようにスマホでも閲覧することが当たり前になって、最近ではアクセス解析をするとPCからの閲覧をすっかり抜いてしまったサイトもあります。

スマホからの見え方をチェックしていて、よくモガイテいます。。。

今回は、「Androidでp要素などが、勝手におかしな所で改行してコンテンツ幅が狭くなる」という現象が、何とか解決したのでメモとして残します。



【解決前】

p要素がAndroidで見た時に、ヘンな改行が入って右側がスカスカになった状態です。

gra_before

なぜか、Androidだけ??しかも、サイトによってその現象が起きたり起きなかったり??


【解決後】

cssにある記述をしたら、すっかり直りました!

gra_after

その方法とは・・・?!


【解決策】

1px四方の透明gif画像を準備します。

あとは、cssで以下のように1行書くだけでした。(p要素の背景画像に透明gifを設定するだけ!)
たったこれだけでAndroidでの表示が直りした!!(Android確認バージョン4.2.2)

p { background-image: url(../images/common/pix.gif); }

p要素以外にも、tableでtdとかも似た現象が起きることがあったのですが、その場合もこの方法で解決しました♪


【参考にさせて頂いたサイト】

今回の件に関して、以下のブログでとても詳しく書かれていましたので、参考にリンクさせて頂きます!

ひとまず、解決して良かった!良かった!ということで、今日はオシマイです♪

-Webの記録
-, ,

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

関連記事

no image

Yahoo!アクセス解析を使ってみた感想【レポート】

この記事は約 1 分で読めます。 以前、「Yahoo!アクセス解析を設定してみました!」でYahoo!アクセス解析を設定し、Google Analyticsと一緒にこのブログのアクセス解析を開始しまし …

no image

WordPress お問い合せフォームプラグイン「Trust Form」を試してみた♪

この記事は約 1 分で読めます。 今回は、WordPressのお問い合せフォーム用プラグイン「Trust Form」を試してみました。 ・・・と言っても、まだローカル環境でのテスト操作なので全ての実験 …

no image

ナビゲーションボタンのコーディングについて考えてみた

この記事は約 1 分で読めます。 ナビゲーションボタンのコーディングをする時に、どんな風にコーディングしていますか? 対応するブラウザとかによっても変わると思うのですが・・・。 今回、ちょっとナビゲー …

no image

WordPress カテゴリごとに部分的デザインを変えたい時

この記事は約 1 分で読めます。 WordPressで自分なりにテーマをカスタマイズしていると、カテゴリごとにデザインを変えたい!ということがあります。 ページまるごとデザイン(表示)を変える場合と、 …

no image

simplegallery.jsでシンプルだけど高機能なスライドショーを作ってみた♪

この記事は約 1 分で読めます。今回は、数枚の画像でスライドショーを「simplegallery.js」で作ってみたいと思います。 名前の通りシンプルですが、なかなか高機能で取付けも簡単に出来たので、 …