iPhone


【CSS】iphoneでbrタグを含む長文をうまく選択する方法

iphoneでbrタグをまたいで文章を選択すると、希望の文字列より広範囲で四角く選択されてしまう。これはiphoneの使用のよう。

この問題はbrタグを使わず、CSSで改行すると解決できる。

html
-----------------------------
<br>
-----------------------------

↓↓↓↓↓

html
-----------------------------
<span class="br"></span>
-----------------------------

css
-----------------------------
.br:before {
content: "\A";
white-space: pre-wrap;
}
-----------------------------

CSSで改行

iphoneのブラウザで文字列を選択できない

iphoneのブラウザで文字ができない現象に遭遇。通常文字列を長タップすると選択およびコピーのポップアップが出るが、それがでなくなる。

出なくなる条件。

  • タグを含まない文字列が長く続く
  • line-heightの値が250%などと大きい
  • viewport(スマホサイズの指定)がある
  • 以上3つの条件が揃うとコピーができない。文字列の長さを短くしたり、line-heightの値を小さくするとコピーができるようになる。viewportの指定を外せば、タグを含まない長い文字列でも、line-heightが大きい値でもコピーに支障なし。

    現象はiphone5s(iOS9.3.2) と iphone6s(iOS9.3.3) で確認。それぞれの端末で選択できなくなるまでの文字数が違う。この違いが、画面の大きさからか、スペックからか、OSのバージョンからなのかは不明。

    対症療法として文字列中の適当な箇所になどのタグを入れるとコピーできるようになる。

    2016/09/22 追記
    原因判明。読み込んでいた二つのcssファイルそれぞれに #content があった。一つ消したら不具合もなくなった。

    iPhoneで長文のテキストが選択しにくい

    iPhone の safari でテキストを選択しようとすると選択がしにくい。長押ししてもテキストを選択できる確率は三回に一回以下だった。

    選択できない(しずらい)テキストには特徴がある。長文で改行などのタグが一切入ってないこと。解決策はタグを入れる。

    //タグなしなのでテキストを選択しづらい
    ----------------------------------------------------------
    ぶうと云いって汽船がとまると、艀はしけが岸を離はなれて、漕こぎ寄せて来た。船頭は真まっ裸ぱだかに赤ふんどしをしめている。野蛮やばんな所だ。もっともこの熱さでは着物はきられまい。日が強いので水がやに光る。見つめていても眼めがくらむ。事務員に聞いてみるとおれはここへ降りるのだそうだ。見るところでは大森おおもりぐらいな漁村だ。人を馬鹿ばかにしていらあ、こんな所に我慢がまんが出来るものかと思ったが仕方がない。威勢いせいよく一番に飛び込んだ。続つづいて五六人は乗ったろう。外に大きな箱はこを四つばかり積み込んで赤ふんは岸へ漕ぎ戻もどして来た。陸おかへ着いた時も、いの一番に飛び上がって、いきなり、磯いそに立っていた鼻たれ小僧こぞうをつらまえて中学校はどこだと聞いた。小僧はぼんやりして、知らんがの、と云った。気の利かぬ田舎いなかものだ。猫ねこの額ほどな町内の癖くせに、中学校のありかも知らぬ奴やつがあるものか。ところへ妙みょうな筒つつっぽうを着た男がきて、こっちへ来いと云うから、尾ついて行ったら、港屋とか云う宿屋へ連れて来た。やな女が声を揃そろえてお上がりなさいと云うので、上がるのがいやになった。門口へ立ったなり中学校を教えろと云ったら、中学校はこれから汽車で二里ばかり行かなくっちゃいけないと聞いて、なお上がるのがいやになった。おれは、筒っぽうを着た男から、おれの革鞄かばんを二つ引きたくって、のそのそあるき出した。宿屋のものは変な顔をしていた。
    ----------------------------------------------------------

    ↓↓↓↓↓↓↓↓↓

    //適当に改行タグを入れると選択しやすくなる
    ----------------------------------------------------------
    ぶうと云いって汽船がとまると、艀はしけが岸を離はなれて、漕こぎ寄せて来た。船頭は真まっ裸ぱだかに赤ふんどしをしめている。<br>野蛮やばんな所だ。もっともこの熱さでは着物はきられまい。日が強いので水がやに光る。見つめていても眼めがくらむ。事務員に聞いてみるとおれはここへ降りるのだそうだ。見るところでは大森おおもりぐらいな漁村だ。<br>人を馬鹿ばかにしていらあ、こんな所に我慢がまんが出来るものかと思ったが仕方がない。威勢いせいよく一番に飛び込んだ。続つづいて五六人は乗ったろう。外に大きな箱はこを四つばかり積み込んで赤ふんは岸へ漕ぎ戻もどして来た。<br>陸おかへ着いた時も、いの一番に飛び上がって、いきなり、磯いそに立っていた鼻たれ小僧こぞうをつらまえて中学校はどこだと聞いた。小僧はぼんやりして、知らんがの、と云った。気の利かぬ田舎いなかものだ。猫ねこの額ほどな町内の癖くせに、中学校のありかも知らぬ奴やつがあるものか。<br>ところへ妙みょうな筒つつっぽうを着た男がきて、こっちへ来いと云うから、尾ついて行ったら、港屋とか云う宿屋へ連れて来た。やな女が声を揃そろえてお上がりなさいと云うので、上がるのがいやになった。門口へ立ったなり中学校を教えろと云ったら、中学校はこれから汽車で二里ばかり行かなくっちゃいけないと聞いて、なお上がるのがいやになった。<br>おれは、筒っぽうを着た男から、おれの革鞄かばんを二つ引きたくって、のそのそあるき出した。宿屋のものは変な顔をしていた。
    ----------------------------------------------------------
    (坊っちゃん 夏目漱石)