自分の海外Amazonで購入する方法の
サイトのアクセスを見ると、ブラウザで言うとSafariが一番多い。
そしてその理由は異常なまでのAppleとiPhone端末の
シェアの高さだ。

実際自分の身の回りに置き換えてみても、
Takewari開発メンバー現在6名のうち自分を除く
5名がiPhoneユーザだし、
会社などで考えてみても割合としては
それに近い状態になっている。

こういった状態なのでiPhone向けにページを最適化するのは
当然の流れとも言える。

それで、ここ数日google adsenseを色々いじっていたのだが、
レスポンシブ広告ユニットで表示されやすい横長バナーよりも
明らかに正方形に近い形の広告ユニットの方がクリック率が高い。

これはPC、スマホどちらにも言えるのだが、
実際Yahooや大手のサイトを見ても、
一昔前の468×80みたいな横長バナーはほぼ姿を消していて、
右にも記事下にも四角いバナーが見て取れる。

そうなってくると広告ユニットを選ぶ上で
300×250などの選択肢が出てくるかと思うのだが、
bootstrapで定義されているコンテナとカラムは
基本的にpaddingが15で定義されている。

そして、iPhoneの画像サイズは320が基本なので、
padding 15×2の30で
画像サイズ320-30で10px分なんか余ってしまい
うまく表示されない。

それで、colとcontainerのpaddingを10にすると
これまたおかしな事になった。

原因を探っていくと、
カラムの親であるrowと、
その他のユニットである

navbar-header
navbar-form
が-15pxでpadding設定されていて、
この分で表示がずれていたことが分かった。

色々ググったんだけど、解決している人が見当たらなかったのでメモ。

これで結構iPhoneにも綺麗に広告が表示されつつ、
PCにも比較的Yahooぽい感じで表示されるようになった。

1週間くらいさらに様子を見てみる。