google optimizerのABテストでモバイルやPCなどでCSSの出し分けをしたいとき
今回はgoogle optimizerのABテストでモバイル、タブレット、パソコンでCSSの出し分けをしたいときどうすれば良いのかについてご紹介いたします。
google optimizerのABテストでモバイルやPCなどでCSSの出し分けをしたいとき
結論として、私はHTMLやCSSを変更せずに、JSを使いました。
CSSでモバイルなどの出し分けをしたいときは、
1 2 |
@media only screen and (max-width: 768px) { } |
など@media only screen and (max-width: 768px)を使って実装することになると思います。
しかし、google optimizerのABテストではこれを使えません。(正確には使える方法があるのかもしれませんが、私は知りません)
よって、私はJSを使って無理やりCSSを整えることにしました。
例として、WidthとHeightを変えた時、次のソースコードを要素に直接注入いたしました。
1 2 3 4 5 |
var regexp = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i; if(window.navigator.userAgent.search(regexp) !== -1){ document.getElementById('testtarget').style.width = '100px'; document.getElementById('testtarget').style.height = '50px'; } |
ソースコードを見てなんとなく何をしているのか想像がつくと思いますが、まず正規表現を利用した条件分岐を行い、画面を開いた端末がスマートフォンだった場合に、WidthとHeightを変えるCSSを導入しております。
私はこの方法でうまくいきました。
この方法を応用すれば、開いている端末がタブレットだった場合にCSSを変えることもできちゃいます。
ぜひこのサンプルコードを利用してみてください。
終わりに
今回はgoogle optimizerのABテストでモバイル、タブレット、パソコンでCSSの出し分けをしたいときどうすれば良いのかについてご紹介いたしました。
最後までお読みいただきありがとうございます。
ブログやTwitterでのシェアOKです。
コメントもお待ちしております。
誤植や勘違いなどございましたらコメント欄にて教えていただけると幸いです。
Youtubeチャンネル開設いたしました。
よろしければチャンネル登録お願いいたします。
https://www.youtube.com/channel/UC219XhmSRxmXltTy6COxSMw
Posted by ちこ
関連記事

「落葉高木」という言葉の読み方とは?
今回は「落葉高木」という言葉の読み方についてご紹介いたします。 「落葉高木」とい ...

ADVパートという言葉の意味とは?
今回はADVパートという言葉の意味についてご紹介いたします。 ADVパートという ...

押上駅の「押上」の読み方とは?
今回は押上駅の「押上」の読み方についてご紹介いたします。 押上駅の「押上」の読み ...

配信における「ファンボ」という言葉の意味とは?
今回は配信における「ファンボ」という言葉の意味についてご紹介いたします。 配信に ...

PythonでTypeError: %d format: a number is required, not NoneType
今回はPythonで「TypeError: %d format: a numbe ...
ディスカッション
コメント一覧
まだ、コメントがありません