よく使うcss
700 ワード
1.携帯端末:ユーザーが文字を長押しすることを防止する(user-select)
互換性:
ios:プラス-webkit-接頭辞すべてサポート
android:プラス-webkit-接頭辞すべてサポート
2.携帯端末でよく使われるtransform(translate/scale/rotate)
互換性
ios: ios8.1-8.4-webkit-接頭辞を追加する残りのシステムバージョンのサポート
Android:Android 4.4および以下に-webkit-プレフィックスを追加し、残りのバージョンでサポート
3.メディア照会(iphone 5、iphoneXとiphoneX maxを区別)
iPhone 5の幅が狭すぎたり、iPhone XとiPhone X maxの高さが高すぎたりするため、この3機種に対して個別のcss設定が必要になる場合があります.
互換性:
ios:プラス-webkit-接頭辞すべてサポート
android:プラス-webkit-接頭辞すべてサポート
2.携帯端末でよく使われるtransform(translate/scale/rotate)
互換性
ios: ios8.1-8.4-webkit-接頭辞を追加する残りのシステムバージョンのサポート
Android:Android 4.4および以下に-webkit-プレフィックスを追加し、残りのバージョンでサポート
3.メディア照会(iphone 5、iphoneXとiphoneX maxを区別)
iPhone 5の幅が狭すぎたり、iPhone XとiPhone X maxの高さが高すぎたりするため、この3機種に対して個別のcss設定が必要になる場合があります.
@media screen and (max-width: 320px) {
}
// iphoneX
@media only screen and (width: 375px) and (height: 812px) and (-webkit-device-pixel-ratio:3) {
}
// iphoneX max
@media only screen and (width: 414px) and (height: 896px) {
}