字体变小，图片变模糊
1 .想让图片再手机显示更加清晰，比如使用2x的背景图来替代img标签。pc上看着是正常的
h5网站input设置为type=number的问题
1 .maxlength属性不能用。自己写js解决
2 .form提交的时候默认取整。因为form提交会做表单验证，此时step默认是1，所以要主动设置step属性，如果想要绑定2位小数，就要这样setp='0.01'
3 .安卓手机出现样式问题.需要手动重置样式
input[type=number] {
-moz-appearance:textfield;
}
input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{
-webkit-appearance: none;
margin: 0;
}
4 .这样默认样式我都用了nut-ui这个库。基本都不会遇到这些问题。因为在库里面这些输入框都感觉和原生差不多了
5 .其实就是下一步要看看，引入哪些库还有没有必要，现在已经是按需引入了。
select下拉选择设置
1 .右对齐 select options{
direction:rtl
}
//这个需求从来没见过
2 .hover展开option
function showDropdown(sltElement) {
var event;
event = document.createEvent('MouseEvents');
event.initMouseEvent('mousedown', true, true, window);
sltElement.dispatchEvent(event);
}
//创建一个mouse down事件
3 .设置自己的下拉箭头
select::-ms-expand { display:none; }
4 .这种兼容性问题。我都不如觉得自己写组件了，没有必要一定死磕原生
autoplay失效问题
1 .必须要在一个click事件里面响应一下play,然后马上pause，后面自己在操作音乐就随便了
2 .微信无法自动播放，需要引入微信的接口
<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js "></script>
document.addEventListener("WeixinJSBridgeReady ", function() {
document.getElementById('music').play();
}, false);
3 .ios不支持animation-play-state 属性，无法实现音乐转圈停到一般的时候
往返缓存
1 .点击浏览器的回退不会自动执行js，特别是在苹果中，其实返回做了缓存，
windos.onunload=function(){}
window.onpageshow = function(evt){
if(evt.persisted){
document.body.style.display ="none ";
location.reload();
}
};
//还有一种处理情况
onpageshow每次页面加载都会触发,无论是从缓存中加载还是正常加载,这是他和onload的区别;persisted判断页面是否从缓存中读出
摇一摇播放音乐
1 .shake.js 可以实现相关的功能
元素点击产生背景或边框
1 .-wenkit-tap-hightlight-color:rgba(0,0,0,0)
2 .小米那边还是不行，那就要用div标签代替a链接了
transition 清除闪屏
-webkit-transform-style: preserve-3d; //设置内嵌的元素在 3D 空间如何呈现：保留3D
-webkit-backface-visibility:hidden; //设置进行转换的元素的背面在面对用户时是否可见：隐藏
-webkit-perspective: 1000;
input 的placeholder 文本位置偏上的情况
1 . line-height:normal;需要重设下默认值
input 不要首字母大写
<input autocapitalize="off " autocorrect="off " /> //input的三个属性autocomplete:默认为on,代表是否让浏览器自动记录输入的值,可以在input中加入autocomplete="off "来关闭记录,保密输入内容;autocapitalize:自动大小写;autocorrect:纠错
ios非点击元素span，label监听click事件，ios不会触发
1 .给元素加一个css代码
cursor:pointer
移动端的几个视口
layout 布局视口
1 .移动设备要让自己可以展示所有的网站，即使那些不是为了移动设备设计的网站
2 .为了不破坏pc网站的布局，移动设备把自己的浏览器可视区域设了一个较大的默认值，比如980px、这样那些专门为pc展示的网站也是可以展示了
3 .他的宽度可以通过document.documentElement.clientWidth来获取
4 .layout viewport 的宽度是大于浏览器可视区域宽度的
视觉窗口
1 .visual viewport
image.png
理想窗口
1 .现在已经有了两个窗口，但是还是不够，因为现在越来越的的网站会专门给移动端设计网站。所以必须有一个能狗完美适配移动设备的viewport
完美适配符合以下几个要求
1 .用户不需要缩放，或者使用横向滚动条就能正常查看网站的所有内容
2 .显示的文字大小是合适的。14px大小的文字，不会因为在不同的分辨率屏幕下有明显的不同
2 .取值是window.screen.width3
3 .理想视口没有固定的值，不同的设备有不同的理想视口
总结
1 .css布局，尤其是百分比宽度，是相对于layout viewport的宽度计算的（即页面最顶级元素html的自适应宽度（或width: 100%）的参考系就是layout viewport的宽度），它要比visual viewport宽得多
2 .layout viewport和visual viewport都是由css像素测量的，但是visual viewport的尺寸会随着缩放变化（如果你进行放大操作，那么屏幕上将展示更少的css像素），而layout viewport的尺寸将保持不变
3 .layout viewport可以设置成为ideal viewport，通过设置width=device-width 这组指令就可以了（但要注意的是，在iphone和ipad上，无论是竖屏还是横屏，device-width都是竖屏时ideal viewport的宽度。）
4 .每个移动设备浏览器中都有一个理想的宽度，这个理想的宽度是指css中的宽度，跟设备的物理宽度没有关系，在css中，这个宽度就相当于100%所代表的那个宽度。我们可以用meta标签把viewport的宽度设为那个理想的宽度，如果不知道这个设备的理想宽度是多少，那么用device-width这个特殊值就行了，同时initial-scale=1也有把viewport的宽度设为理想宽度的作用。所以，我们可以使用 <meta name="viewport" content="width=device-width, initial-scale=1"> 来得到一个理想的viewport（也就是前面说的ideal viewport）
安全区域
1 .view-fit。好像用不到啊。适配iPhoneX而诞生的一个属性，它用于限制网页如何在安全区域内进行展示
2 .env,constant。顶部和底部的合理摆放在安全区域内。ios有这三个css函数.用于设定安全区域与边界的距离
<meta name="viewport" content="viewport-fit=cover">
//必须这样之后才能使用
body {
padding-bottom: constant(safe-area-inset-bottom);
padding-bottom: env(safe-area-inset-bottom);
}
图片模糊的操作
1 .srcset 使用img标签的srcset属性，浏览器会自动根据像素密度匹配最佳显示图片：
<img src="conardLi_1x.png"
srcset=" conardLi_2x.png 2x, conardLi_3x.png 3x">
弹出数字键盘
1 .不用原生的type=number,只要给匹配正则，就可以实现以下键盘
2 .数字+#，*，符号
<input type='tel'>
3 .纯数字
<input pattern='\d*'>
调用系统的某些功能
0 .照理说这应该是a标签href的属性功能，为啥文档上面没有仔细出现这个呢
1 .打电话
<a href='tel:10086'>打电话</a>
2 .发短信
<a href='sms:10086'></a>
3 .发送邮件
<a href='mailto:10086#163.com'>
4 .选择照片或者拍摄照片
<input type='file' accept='image/*'></input>
5 .选择视屏或者拍摄视频
<input type='file' accept='video/*'></input>
打开原生应用
1 .可以打开原生应用的某些功能
2 .URL
网友评论