h5开发小结

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