H5前端常见问题

走了程序元英语式的抱怨之路：没有风雨哪有夏天？2017.6.1岁月带走的是你的童年你带不走的是深藏在内心深处的童心Ps：其实程序员还是挺幼稚的O(∩_∩)O哈哈~元常见标签1.H5页面结构//宽度设置viewportwidth，为正整数，或者字符串'device-width'//height设置视口高度，一般设置width，高度会自动解析，不需要设置//initial-scale的defaultzoomratio是一个数字，可以有小数//minimum-scale允许用户的最小缩放比例，它是一个数字，并且可以有小数//maximum-scale允许用户的最大缩放比例，它是一个数字，可以haveadecimal//user-scalable是否允许手动缩放2.其他Meta标签H5标准声明，使用HTML5doctype，不区分大小写Standardlang属性写法声明文档使用的字符编码页面描述页面关键字页面作者搜索引擎抓取iOS设备开始Enabletheextremespeedmodeof360browser(webkit)PrioritizeIEThelatestversionandChrome3.PagecachesettingsFrequentlyAskedQuestionsHowtodefinethefontonthemobileterminalfont-family@--------------------------------------TheEnglishnameoftheChinesefont@宋体SimSun@黑体SimHei@微信雅黑MicrosoftYahei@微信雅黑MicrosoftJhengHei@新宋体NSimSun@新晚明体MingLiU@精明体MingLiU@标级体DFKai-SB@做宋FangSong@重体KaiTi@做宋_GB2312FangSong_GB2312@重体_GB2312KaiTi_GB2312@@Description:MostChinesefontsuseSongTiandYahei,andEnglishusesHelveticabody{font-family:MicrosoftYahei,SimSun,Helvetica;}QuotingiconfontfontsMethodClicktoseehowtoquotetheiconfontfontHowtomakeacall,sendanemail,orsendatextmessageCall:15221639774Sendatextmessageto:10086ClickmetosendemailHowtoremovethebackgroundorborderwhenclickinganelement//Iosusersclickalink,atranslucentgraywillappear颜色遮罩，如果要禁用它，可以将-webkit-tap-highlight-color的alpha值设置为0，去除灰色半透明遮罩；//android用户点击一个链接，会出现一个边框或者半透明的灰色遮罩，不同厂商定义的效果是不一样的。可以将-webkit-tap-highlight-color的alpha值设置为0，去除部分机器自带的效果；//winphone系统，点击标签生成的灰色半透明背景可以通过设置移除;//特别说明：部分机型无法移除，如和小米2一样，按钮还有另外一种方式，不用a或者input标签，直接用div标签a,button,input,textarea{-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-user-modify:read-write-plaintext-only;//-webkit-user-modify有个副作用，就是输入法不能再输入多个字符}//也可用*{-webkit-tap-highlight-color:rgba(0,0,0,0);}//winphone下手机拍照和上传图片/IOS有拍照、录像、选择本地图片的功能，而部分Android只有具有选择本地图片的功能。Winphone不支持document.documentElement.clientHeight?'landscape':'portrait';if(orientChk=='lapdscape'){//这里是横屏下需要执行的事件}else{//这里是竖屏下需要执行的事件}}orientInit();window.addEventListener('onorientationchange'inwindow?'orientationchange':'resize',function(){setTimeout(orientInit,100);},false)//CSS处理//竖屏样式@mediaalland(orientation:portrait){}//横屏样式@mediaalland(orientation:landscape){}超级实用的CSS样式*{padding:0;保证金：0；border:0;}input,textarea,button{-webkit-appearance:none;-moz-外观：无；-ms-外观：无；外观：无；垂直对齐：中间；}ul,li{list-style-type:none;}body{最小宽度：320px；最大宽度：640px；边距：自动；背景：无；}em{字体样式：正常；}//更改输入框placeholder的颜色值::-webkit-input-placeholder{/*WebKit浏览器*/color:#999;}:-moz-placeholder{/*MozillaFirefox4到18*/color:#999;}::-moz-placeholder{/*MozillaFirefox19+*/color:#999;}:-ms-input-placeholder{/*InternetExplorer10+*/color:#999;}音频和视频元素不能在ios和andriod中自动播放//音频，措辞1.你的浏览器还不支持//音频，写法2优先播放音乐bg.ogg，不支持播放bg.mp3//JS绑定autoplay(操作window时播放音乐)$(window).one('touchstart',function(){music.play();})//微信document下的兼容处理.addEventListener("WeixinJSBridgeReady",function(){music.play();},false);//总结//1.audio元素的autoplay属性在IOS和Android上不能使用，但是在PC端是正常的//2.audio元素没有设置控件时，在IOS和Android上会占用空间，Chrome不会占用PC端的任何空间。JS判断微信浏览器函数isWeixin(){varua=navigator.userAgent.toLowerCase();if(ua.match(/MicroMessenger/i)=='micromessenger'){返回真；}else{返回错误；}}消除过渡闪屏.css{-webkit-transform-style:preserve-3d;-webkit-backface-visibility:hidden;-webkit-perspective:1000;}box-sizing:border-box当你将一个元素设置为box-sizing:border-box;时，该元素的内边距和边框将不再增加它的宽度例如：例如