2015年3月3日火曜日

モバイル(タッチデバイス)用に設定すべきCSS


リンク要素をタップしたときのグレーや緑の枠を消す


* {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0); /*透明色を指定*/
}

iOSでリンクを長押しした際に表示されるポップアップメニューを消す


* {
    -webkit-touch-callout: none;
}

フォーカスのある要素(リンク、フォーム等)の枠・点線を消す


* {
    outline: 0px none;
}

iOSでフォームのボタン等のデフォルト表示を無効にする

input {
    -webkit-appearance: none;
}

テキスト選択できないようにする


* {
    -moz-user-select:none;
    -webkit-user-select:none;
    -ms-user-select:none;
    user-select:none
}

※ただし、このままだとinput要素で文字入力ができなくなる場合(Androidの古いバージョン等)があるので以下のように指定する。

input[type=text]  {
    -webkit-user-select: auto;
}

慣性スクロールの適用


div.CLASSNAME {
    -webkit-overflow-scrolling: touch;
}

GPUアクセラレーションを効かせる


div.CLASSNAME > * {
    -webkit-transform: translateZ(0px);
}

※上記の慣性スクロール動作が重いときに指定するとよい。
※GPUアクセラレーションを効かせる指定ならば-webkit-transform: translateZ(0px)以外でもよさそう。ただし、iOS6からは、-webkit-transform:preserve-3dではGPUアクセラレーションが効かないそうです。

iPhoneで文字サイズが大きくなりすぎる場合

body {
    -webkit-text-size-adjust: 100%;
}

参考: -webkit-text-size-adjust: none を絶対に設定してはいけない理由

ボックスサイズ算出方法の指定


* {
    box-sizing: border-box;
}

※パディングとボーダーを幅と高さに含めて表示


その他: 参考 スマートフォンサイト制作時に覚えておきたいCSS 15



0 件のコメント:

コメントを投稿