カイカブログ

フリーランスデザイナー カイカデザインのブログ
デザイン、html、wordpress等についてほとんど役に立たない単なる感想レベルのたわごとを綴っています

今更だけど、Android4.0でテキストが7割くらいのwidthで折り返してしまう場合の対処法

なんか久々にcss系の記事だ!
日頃wordpress系のグチばかり書いているけどそうそうこれこれ(※井之頭五郎調で)
オレが求めていたのはこれだったんだ、こういうのがいいんだよなぁ(※井之頭五郎(以下略))
や、だからといってテンション上がりすぎてこんな長いタイトルになったんじゃないんですよw

冒頭から前後しますが、実は今週ようやくスマホ(iPhone)にしました。
はい、今「え、今まで2014年の半分まで何使ってたの?」って思ったヤツ、右頬出せ右頬〜
すいません、これまでひたすらガラケー(フィーチャーフォン)一筋でしたw ザッツ職人(職人に謝れ!)

というのも、これには深いトラウマが関わってまして・・・。。

私がまだ会社員だった頃、当時の会社が業界内ではスマホ最適化にいち早く対応し(やがっ)たんですよ。
まだ2010年当時、デザイナーのガラケー率が軒並み高く(笑※他部署は結構スマホ率が高かった)そんな連中がスマホ最適化の実作業をやらされるというとんでもない状況でしたw

その時にPC用のソースをスマホで見るとなぜかテキスト部分が軒並みPC表示の7割くらいの幅で折り返されるという怪奇現象によく直面しました。。
スマホといってもこれ実はiPhoneやAndroid2や3や4.1では現れないんですよ。。
みんなiPhoneの方がまだいじりやすいからiPhoneでばかり検証していたので、クライアントから上記ツッコミが来ても「キャッシュじゃないすか?」と、他人からまず疑うという最低の判断w
まあ当たり前ながらすったもんだがあったんですが(省略w)まず気のせいではないことが判明wwクライアントの怠慢でないことも判明(まじすいませんでした)。怪奇現象じゃなく自分らでどげんかせんといかんことが突きつけられました…

慣れてないAndroidをみんなでいじり倒して、4.0で当該現象発見!
そうか戦犯はAndroid4.0なんだね(良い笑顔)!
つうかなんで??

AndroidはIEやiOSと違って、数代リリースされたら消えることなく、永久に古いバージョンが残るので「古い」「利用推奨環境からはずす」という逃げ道がこの時は使えず・・・orz いやあ、これものすごく精神的にキツかった、、、
IEですらいずれクソ古いバージョンは淘汰されるのに!!!
IE以上にクソなクセのあるブラウザ初めて見た、と思いましたねえ。。

解決策をみんなで色々試行錯誤して試したり調べた結果、テキストを囲む直接の親ブロックのbackground-imageに背景を設定すればちゃんとテキストが配置されることが分かりました。理由は知らんけど

背景画像をもともと設定していれば無問題なんですが、モンダイは背景画像を入れられない部分。
そんな時は、spacer.gifをいれてやればOK。
そんなアホな、と思う気持ちはわかりますが(笑)本当に利くんです。
なのでテキストを囲むブロック要素にはおまじないのように以下一行をcssに書いておくといいですよ

background-image:url("spacer.gif");

※既に背景画像が入っている場合は不要です

もうこの騒動が大きな傷(笑)となり、すっかりAndroid嫌いになってしまった次第ですw
そもそも操作性だってガラケーの方がラクじゃん! オレは人類最後のガラケーホルダーでいるぞ!と訳のわからん意地を張り続け気づいたら2014年。いい加減仕事面のイメージ悪くなるんじゃないか、というレベルもとうに越し(笑)、人類最後伝説を爆走していたのですが、某Y●h●●メール(笑)が5月末でフィーチャーフォン対応を切るという強硬策(主観)に!!
これさすがに不便だわ、、ということでついにスマホの軍門に下りましたw

iPhoneは結構いじってると楽しいです(手のひら返し!!!)w

Leave a Reply

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