読者です 読者をやめる 読者になる 読者になる

かきのマネー

お金と良いモノ

もしかしてこのブログ、今までAndroidでは読めなかった?

スポンサーリンク

f:id:bbc-21:20170404183713j:plain

 

今日は有給を取っていたので、ぐだぐだしながらブログ読んでました。

そしてビルメンブロガーyamapiさんに「トラックボールマウスいいよね!」ってブコメしたところ、こんなご指摘をいただきました。

 

 

なん…だと…?

  

自分のiPhoneではどのブラウザでも見れるんですが、他では見れない?

たしかにChromeのデベロッパーツールではスクロールできない。

めっちゃ焦っていろんなところをいじってみて、なんとか解決しました。

もしかしたら同じような人がいるかもしれないので、共有しておきますね。

 

原因はoverflow:hidden

スマホ表示はレスポンシブにせず、別でHTMLを設定しています。

以前、画像が大きいか何かでスマホの幅を超えてしまい、横スクロールできるようになってしまっていました。

縦にスクロールするブログで横にスクロールができてしまうと、非常に読みづらいのです。

縦か横どちらかにしか反応しないので、下から上にスワイプしてるのに横に反応してしまって、下に動かない!ってなったりします。

 

これを解消するために、overflow:hiddenというCSSを入れていました。ちょっと検索したら同じ悩みの解決策で「overflow:hiddenいいぜ!」ってのを見つけたので、「よっしゃ!」とよく調べずに設定しました。

画面からはみ出した領域を表示させないようにするものです。

これで横のはみ出た部分にスクロールできなくなり、縦スクロールだけできるようになって(と思って)iPhoneで確認したところ問題なく表示されていました。

 

iOSでは効かない

私のモバイル環境はiPhoneのみ。

今までモバイル表示はiPhoneで確認していて問題なかったので、良しとしていました。

ところがなんと、このoverflow:hidden、iOSでは効かないんですって!

だからiPhoneでは問題なかったのか!

そこにAndroidユーザーyamapiさんのご指摘。

 

つまり、今までずっとAndroidでは読めなかった…?((((;゚Д゚)))))))

たしかに本文は画面からはみ出ている領域だ。

そもそも都合よく横だけ非表示になるのがおかしいんですねw

 

追記:やっぱり読めなかったみたい(;ω;)

もしかしてこのブログ、今までAndroidでは読めなかった? - かきのマネー

スマホから読めないのでPCから見てましたw通信制限端末だから読み込めないのかと思ってたらこんな罠があったんですね…おそろしや。これからはスマホでも読ませていただきます!w

2017/04/04 18:49

 

いくら日本はiPhoneユーザーが多いといってもこれは痛い!!

 

大感謝 

yamapiさん本当にありがとうございました。

教えてもらえなかったらずっと気づかないままで、Androidユーザーからは読まれない(読めない)ブログになってました。

 

というわけでoverflow:hiddenは消しました。

なぜかbodyのwidthを指定をしてなかったので、とりあえず100%にしときました。

今はAndroidでもスクロールできるはず…(どうですか…?)

 

大恩人yamapiさんのビルメンデスはこちら。

明けを休みにカウントしたら週休4日だなんてヒルナンデスビルメンテナンスめちゃくちゃ魅力的ですね(´-`).。oO