まみやん技術メモ

仕事でためになった情報をこまめに書いていきます。

iPhoneやAndroidで簡単デバッグ、改めてfont-familyについて考えてみる。メモ。

Androidタブレットで表示したときにWebページが最適化されるようレスポンスブデザインでコーディングしました。今回はAndroidアプリのLPだったので対象メインユーザーはAndroid端末の方なの。だからPCは除外で。
モバイル端末だけどPCと同じようにブラウザの開発者モードを開いてデバッグしたい・・・
と思って調べたらあった。iPhoneでのデバッグ方法はプログラマさんに教えてもらったから知ってたけどAndroidもできるのね♩使い方は簡単。主にはモバイル端末とPCをUSBケーブルで接続してアプリをインストールするだけ。便利だ!

iPhoneデバッグ
要チェック。iPhone/iPadで表示しているWebサイトに対して使えるWebインスペクタ·Mobile Safari Inspector MOONGIFT
Androidデバッグ
SDK不要Android端末のリモートデバッグChrome拡張機能「ADB」 - Intelligent Technology's Technical Blog


一応iPhoneでも見れるようにとあとからお達しがきたのでiPhoneで確認したら、submitボタンに指定したbackground-colorが薄い色で表現されている・・・!Androidタブレットでは問題なかったのになぜ?safariの問題かと勘ぐってみたけどiPhoneアプリChromeもそうだった。
どうやら勝手にグラデーションをかけてしまうらしい。
◆回避策
一色のみを指定したgradiateで解決!
hamashun.me : フォームボタンにbackground-colorプロパティを指定するとiPhone Safariでグラデーションがかかる件


先輩社員にコードレビューしてもらったときにfont-familyを指定してあげてとの要望が。
リセットCSSを冒頭に入れこんだだけで安心してた。。
でfont-familyって何を入れてあげたらAndroid,タブレット,iPhoneで最適に見れるんだろうと議論になったんだけど、最終的な終着点はこうなった。

font-family: Verdana, Roboto, "Droid Sans", "游ゴシック", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;

参考サイトはここ
CSSでのフォント指定について考える(2014年) - DTP Transit(Mac OS X, OS X Mavericks, Web Fonts, Web制作, iPhone, フォント)