只是一个文档摘要，纯粹像顺丰的Markdown。HTMLCSSX轴使用百分比字号有些部分无法测量percentage使用REM单元的JS配置页根font-sizesize(function(doc,win){varwin=window;vardoc=win.document;varbaseWidth=640;vardocumentHTML=doc.documentElement;functionsetRootFont(){vardocWidth=documentHTML.getBoundingClientRect().width;varscale=docWidth/baseWidth;if(docWidth>640){scale=1;}varp=scale*100;documentHTML.style.fontSize=p+'px';}setRootFont();win.addEventListener('resize',setRootFont,false);})(document,window);表单和表单-每个浏览器自带的样式。这个问题不仅出现在手机上，也出现在PC上。张新旭有表格详解-输入框光标大小解决：注意勾选line-height值，不要使用line-height垂直居中，从上到下使用相同的padding值表格oftheform-去掉input和select的默认样式/*取消input和select的默认样式*/input,select{outline:transparentdotted;边界：0；背景：#fff；-webkit外观：无；-moz-外观：无；-o-外观：无；appearance:none;}/*inputplaceholder修改，关于select下option的字体颜色，可以直接控制select的color属性*/input::-webkit-input-placeholder,textarea::-webkit-input-placeholder{颜色：#ccc；字体大小：13px；}input：-moz-placeholder，textarea：-moz-placeholder{color：#ccc；font-size：13px；}input::-moz-placeholder，textarea::-moz-placeholder{color:#ccc;font-size:13px;}input:-ms-input-placeholder,textarea:-ms-input-placeholder{color:#ccc;font-size:13px;}表格-重写Button样式CODEPEN形式-iOS机型点击输入框页面会放大width-视口的宽度height-视口的高度initial-scale-初始缩放minimum-scale-允许用户缩放的最小比例maximum-scale-最大scale允许用户缩放到user-scalable-用户是否可以手动缩放滚动条来修改样式&::-webkit-scrollbar{width:4px}&::-webkit-scrollbar-track{border-radius:4px}&::-webkit-scrollbar-thumb{背景：rgba(255,255,255,.1);边界半径:6px}隐藏滚动条但仍然可以滚动&::-webkit-scrollbar{display:none}但是上面只用于webkit浏览器，其他浏览器看到了一种思路：在原来的div外面套一层div，写溢出：隐藏在样式中；使外部div的宽度小于带有内部滚动条的div。内层div的样式是overflow-y:auto;overflow-x:hidden;这样内层div的滚动条就被隐藏了，不过此时还是可以滚动的。纯css，div隐藏滚动条，保持鼠标滚动效果。解决iOS弹性伸缩现象iOS:禁用该层或body的touchstart事件的默认行为//disabledtouchstarteventdocument.addEventListener('touchstart',function(event){event.preventDefault();},false);iOS禁用自动播放音视频是苹果官方明确提出的，为了用户的利益。这里的iOS覆盖（iPhone和iPad）解决方案：这个其实不能从根本上解决问题，只能在微信环境下使用微信的js-sdk实现自动播放。所以iOSSafari浏览器还是死路一条，无法自动播放。wx.ready(()=>{document.getElementById('audio').play();})Append：满足touchstart和touchend事件，touchstart时触发音频a，touchend时触发音频b，但是如果长按的话时间太长，b不会播放或播放会延迟。原因是没有加载音频资源。//预设这个环境functionpreload(){wx.ready(()=>{wx.getNetworkType({success:()=>{this.a=newAudio('a.mp3');this.b=new音频（'b.mp3'）；this.a.loop=true；this.a.load（）；this.b.load（）；}}）；}）；}//touchstart和touchendfunctionstart(){this.a.play();}functionend(){this.a.pause();this.b.play();}iOS中DOM的onclick事件无效解决方法：在DOM光标上的css中添加{:pointer}例如Chrome浏览器默认最小字体大小为12px解决方法：使用适配手机的zoom.(transform:scale(...)translate(...))CODEPENDEMOSSafari隐身模式不支持sessionStorage.setItem()方案一：业务场景可以使用全局变量处理方案二：Safari隐私浏览模式貌似支持localStorage,但不研究materials使用Flexible实现手机购物H5页面的终端适配
