弹出数字键
<input type='tel'></input>
//弹起数字键盘会带上#和*
<input type='number' pattern='\d*'></input>
禁止页面缓存
<meta http-equiv="Cache-Control" content="no-cache">
禁止字母大写
<input autocapitalize="off" autocorrect="off">
针对其他浏览器的配置
<!-- 强制QQ浏览器竖屏 -->
<meta name="x5-orientation" content="portrait">
<!-- 强制QQ浏览器全屏 -->
<meta name="x5-fullscreen" content="true">
<!-- 开启QQ浏览器应用模式 -->
<meta name="x5-page-mode" content="app">
<!-- 强制UC浏览器竖屏 -->
<meta name="screen-orientation" content="portrait">
<!-- 强制UC浏览器全屏 -->
<meta name="full-screen" content="yes">
<!-- 开启UC浏览器应用模式 -->
<meta name="browsermode" content="application">
<!-- 开启360浏览器极速模式 -->
<meta name="renderer" content="webkit">
//这种的要去查 对应浏览器官网的开发文档
让:active 有效，让:hover 无效
<body ontouchstart></body>
禁止屏幕滚动
1 .只要是页面突然出现滚动条的时候，左右出现抖动
body {
padding-right: calc(100vw - 100%);
}
//由于浏览器的滚动条宽度可能不一样宽，有的还不占位置， 所以这样动态计算一下
美化滚动条占位
::-webkit-scrollbar {
width: 6px;
height: 6px;
background-color: transparent;
}
//滚动条整体部分
::-webkit-scrollbar-track {
background-color: transparent;
}
//滚动条轨道部分
::-webkit-scrollbar-thumb {
border-radius: 3px;
background-image: linear-gradient(135deg, #09f, #3c9);
}
//滚动条滑块部分
识别文本换行
1 .white-space:pre-line，可以根据接口返回的 \n 或者
元素自动换行
控制文本溢出
1 .单行溢出:
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
2 .多行溢出
display: -webkit-box;
overflow: hidden;
text-overflow: ellipsis;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
网友评论