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

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

This blog is kept spam free by WP-SpamFree.

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

関連記事

no image

WordPressでオリジナルテーマ作りにチャレンジ 2【切り分け編】

この記事は約 1 分で読めます。 WordPressのオリジナルテーマ作りをしています。 今回は、前回の【準備編】の続編です。 ※(x)html+cssの知識がある事が前提で書いています。 前回までで …

no image

教訓。

この記事は約 1 分で読めます。 ここ最近、あるサイトを作っていて・・・気付かされた事があります。 学校の授業では習わない、実際のクライアントのサイトを制作していく中で起きる事。 Webについて何も知 …

no image

ムームードメインで取得した独自ドメインをエックスサーバーで使う設定方法

この記事は約 1 分で読めます。「エックスサーバー」を利用する事が決まっていて、ドメインをどこで取得しようかな?と思った時、「エックスドメイン」という選択肢もあったのですが、今回は「ムームードメイン」 …

no image

画像最適化に便利な4つのツール

この記事は約 1 分で読めます。スマホを意識したWebページを作っていると、避けて通れない「画像最適化」。 昨年あたりから少しずつ使っていますが、見た目は変わらないのに軽量になるから不思議です! 私が …

no image

easySlider1.7.jsを使ってFlashのようなスライドショーにチャレンジ♪

この記事は約 1 分で読めます。「easySlider1.7.js」を使って、数枚の画像のスライドショーを作りたいと思います。 自動で画像がスライドしますが、見ている人の意思で前後の画像へ戻したり進め …