タグ

ブックマーク / webrandum.net (2)

  • iOS Safariで文章の最後の1文字だけ改行されてしまう現象の対処法

    最近iOS Safariで起きた現象とその対処法についてまとめておきます。 ブラウザ表示のトラブルといえばIEでばかり起きるもののイメージがあったのですが、最近意外とSafariで見たときに「あれ?」となることが増えてきました。 横幅が足りなくて改行されているのではなく、明らかに横幅は余裕があるのに、最後の1文字だけが改行されてしまいました。 原因としては下記のようなことがあるみたいなのですが、自分の場合はdisplay: inline-block;でフォントサイズを14pxで文字数が全角13文字のときに発生しました。 display: inline-block;を指定しているfont-feature-settings: "palt"を指定している文字列が全て全角文字前後に空白がある(コード上の空白も含め)しかも、iPhone長押しでテキストの選択をすると1行で選択されるので、あくまで要素

    iOS Safariで文章の最後の1文字だけ改行されてしまう現象の対処法
  • iOSシミュレーターを使ってWebサイトを開発者ツールを見ながら実機表示で開発する方法

    最近Web制作をしていると、iPhone5で表示した時にWebページに謎の縦線が入っていました。「何がおかしいんだろう?」と思ってChromeの開発者ツールでiPhone5の表示に切り替えたのですが、そのおかしな表示が再現されない… 僕はWeb制作を行う際にいつもChromeの開発者ツールを使っていたのですが、どうやらChromeの開発者ツールは完璧にスマホデバイスを再現してくれるわけではないので、ある程度の表示はしてくれるものの当に細かい微細な部分までは再現してくれないみたいです。 だからこそ実機テストが重要とされてるわけです。 実機で見て何が原因かすぐ判断できるようなものなら良いのですが、流石にパッと見何が原因かも分からないコードを少しづついじって、その都度実機確認というのはかなり面倒です。 そこでふとXcodeのiOSシミュレーター(エミュレーター)を思い出し、それならちゃんと表示

    iOSシミュレーターを使ってWebサイトを開発者ツールを見ながら実機表示で開発する方法
  • 1