iphoneでtwitterタイムラインがはみ出る。を解決。

11/10/2015 ,

先日、お昼休みを丸々コレに費やしてしまったので、MEMO。
久しぶりにiphonでサイトを見たら、twitterタイムラインのおかげでサイトが横動きしていたのでムカぁぁ…!!!(-""-)

iphoneでtwitterタイムラインがはみ出る。を解決。


twitterタイムラインについては、twitterウィジェットを可変に に書いてある通りで… 他のデバイスではそれほど不満なく出来てるんですが、iphoneだけは、どーしてもはみ出しが発生し、ページが左右に動く状態（WEB関係者としては絶対許せない状態）になっていたので、あれこれcssをイジってみた結果… なんとかまともになったので、念の為そのメモ残しておこうと思います。

（左）はみ出た状態　　（右）直った状態
iphoneでtwitterタイムラインがはみ出る。を解決。






これが元々書いていたcss。※Media Queriesで適当にブレークポイントを決めて、いくつか作成。
.twitter-timeline{
    width: 100% !important;
}

↑ これ ↑ でAndroid（7機種確認）もTablet（4機種確認）も問題ないんですが、なぜかiphoneだけはみ出るのです。



で、いろいろcssを追加変更してみて（widthとか調整してみて）、それでもダメだったので、最後は「margin-left:-40px」を無理くり入れて完了！

@media (max-width: 350px) {
/* twitter */
.twitter-timeline {font-family:width:280px!important; margin-left:-40px!important;}
}

強引で乱暴な手ではありますが、うんこiphoneにはこれくらいしないとダメですね。
もぉ… 早く小さいiphone消えてなくなってほしーーーい！（TーT）

（↑）2017年に確認したところ、-40pxは必要なくなっていました(゜∀゜

って、ここ数年ずーーーっと思ってたのに、また新しいので小型化とか…　(-＿-;)

…ってことで、Mac大好きなのに、iphoneはまずます大嫌い。　というヘンテコな状態はまだまだ続きそうです。