Viewport
<!-- 让页面宽度等于设备宽度,缩放比例为1,禁止用户缩放网页 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<!-- 针对一些不识别viewport的浏览器,如黑莓 -->
<meta name="HandheldFriendly" content="true">
<!-- 针对微软的老式浏览器 -->
<meta name="MobileOptimized" content="320">
调用系统功能
<!-- 拨号 -->
<a href="tel:10086">打电话给: 10086</a>
<!-- 短信 -->
<a href="sms:10086">发短信给: 10086</a>
<!-- 邮件 -->
<a href="mailto:839626987@qq.com">发邮件给:839626987@qq.com</a>
<!-- 选择照片或者拍摄照片 -->
<input type="file" accept="image/*">
<!-- 选择视频或者拍摄视频 -->
<input type="file" accept="video/*">
<!-- 多选 -->
<input type="file" multiple>
清除浏览器缓存
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
** 软键盘弹出数字键盘(用户只能输入数字)**
<!-- 有#、*符号输入 -->
<input type='tel'>
<input type="number" pattern="\d*">
** 禁止用户长按选中、复制文本**
.text {
user-select: none;
-webkit-user-select: none;
-moz-user-select: none;
-khtml-user-select: none
}
改变输入框placeholder的颜色值
::-webkit-input-placeholder { /* WebKit browsers */ color: #999; }
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */ color: #999; }
::-moz-placeholder { /* Mozilla Firefox 19+ */ color: #999; }
:-ms-input-placeholder { /* Internet Explorer 10+ */ color: #999; }
input:focus::-webkit-input-placeholder{ color:#999; }
多行文本超出显示省略号
/* 超出n行时显示省略号 */
.hide-text-n {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: n;
-webkit-box-orient: vertical
}
单元素的默认样式
input, button, select, textarea {
border: none;
outline: none;
appearance: none;
-webkit-appearance: none;
-m
自定义滚动条样式
::-webkit-scrollbar /* 滚动条整体部分 */
::-webkit-scrollbar-thumb /* 滚动条内的小方块 */
::-webkit-scrollbar-track /* 滚动条轨道 */
::-webkit-scrollbar-button /* 滚动条轨道两端按钮 */
::-webkit-scrollbar-track-piece /* 滚动条中间部分,内置轨道 */
::-webkit-scrollbar-corner /* 边角,两个滚动条交汇处 */
::-webkit-resizer /* 两个滚动条的交汇处上用于通过拖动调整元素大小的小控件 */
::-webkit-scrollbar修改浏览器滚动条样式,div::-webkit-scrollbar修改某个节点的滚动条样式
** Android上去掉语音输入按钮**
input::-webkit-input-speech-button {
display: none
}
监听屏幕旋转事件并且处理样式
/* 竖屏时样式 */
@media all and (orientation:portrait) {
body::after {
content: '竖屏'
}
}
/* 横屏时样式 */
@media all and (orientation:landscap