スマフォのコーディング中に設定した値のメモ。
iPhoneが結構わがままな子なので、色々設定を標準に戻したりした時の設定あれこれです。
-webkit-text-size-adjust
ブラウザ機能で拡大を行った時に文字サイズをどうするかという設定
/* 拡大されない */
-webkit-text-size-adjust: none;
/* 自動で拡大 */
-webkit-text-size-adjust: auto;
/* 割合で拡大：これを設定しました */
-webkit-text-size-adjust: 100%;
-webkit-font-smoothing
SafariやChromeで少し文字が太くなったり、アニメーション時にも微妙に太くなってしまう現象を解消するのに設定
/* アンチエイリアスしない */
-webkit-font-smoothing: none;
/* アンチエイリアスする */
-webkit-font-smoothing: antialiased;
/* サブピクセルを利用したアンチエイリアス：これがデフォルト */
-webkit-font-smoothing: subpixel-antialiased;
サブピクセルがちょっと太くさせるみたいだけど、どっちもどっちな気がする。背景：黒、文字：白だと太くなるのがハッキリわかるので、デザインに合わせて設定すれば良いかなと思った。
このサイトがとても参考になりました。
http://memolog.org/2013/08/-webkit-font-smoothing_and_usability.html
-webkit-tap-highlight-color
要素をタップしたりフリックした時に、フォーカスが要素に移るとハイライトされてしまうので、それをハイライトさせない......ことはできないので、擬似的に非表示にする設定
/* 背景色な何色でも良いがアルファ値を０に設定する */
-webkit-tap-highlight-color: rgba(0,0,0,0);
-webkit-touch-callout
タップ長押しで表示されるポップアップを表示しないようにする設定。要は、画像とかのコピペ防止だったりとかに使われるもの。
-webkit-touch-callout: none;
iOS8では対応していないという情報もあるようなので、画像のみの対応であれば以下のように設定。
img {
pointer-events: none;
}
これはPCでも対応しているプロパティ。詳しくはMDNを参考に。
https://developer.mozilla.org/ja/docs/Web/CSS/pointer-events
-webkit-overflow-scrolling
overflowで表示したスクロール領域を慣性スクロールで動作させる設定
/* こちらがデフォルト */
-webkit-overflow-scrolling: auto;
/* 慣性スクロール */
-webkit-overflow-scrolling: touch;
-webkit-appearance
Safariで表示するとフォームに自動的に角丸や影などが装飾がされてしまうので、その設定を無効にする方法です。
-webkit-appearance: none;