H5项目常见问题汇总及解决方案.docx
- 文档编号:23775875
- 上传时间:2023-05-20
- 格式:DOCX
- 页数:20
- 大小:23.16KB
H5项目常见问题汇总及解决方案.docx
《H5项目常见问题汇总及解决方案.docx》由会员分享,可在线阅读,更多相关《H5项目常见问题汇总及解决方案.docx(20页珍藏版)》请在冰豆网上搜索。
H5项目常见问题汇总及解决方案
H5项目常见问题及注意事项
Meta基础知识:
· H5页面窗口自动调整到设备宽度,并禁止用户缩放页面
//一、HTML页面结构
//width 设置viewport宽度,为一个正整数,或字符串‘device-width’
//height 设置viewport高度,一般设置了宽度,会自动解析出高度,可以不用设置
//initial-scale 默认缩放比例,为一个数字,可以带小数
//minimum-scale 允许用户最小缩放比例,为一个数字,可以带小数
//maximum-scale 允许用户最大缩放比例,为一个数字,可以带小数
//user-scalable 是否允许手动缩放
//二、JS动态判断
varphoneWidth= parseInt(window.screen.width);
varphoneScale=phoneWidth/640;
varua=navigator.userAgent;
if(/Android(\d+\.\d+)/.test(ua)){
varversion=parseFloat(RegExp.$1);
if(version>2.3){
document.write('
}else{
document.write('
}
}else{
document.write('
}
· 空白页基本meta标签
--设置缩放-->
--可隐藏地址栏,仅针对IOS的Safari(注:
IOS7.0版本以后,safari上已看不到效果)-->
--仅针对IOS的Safari顶端状态条的样式(可选default/black/black-translucent)-->
--IOS中禁用将数字识别为电话号码/忽略Android平台中对邮箱地址的识别-->
· 其他meta标签
--启用360浏览器的极速模式(webkit)-->
--避免IE使用兼容模式-->
--针对手持设备优化,主要是针对一些老的不识别viewport的浏览器,比如黑莓-->
--微软的老式浏览器-->
--uc强制竖屏-->
--QQ强制竖屏-->
--UC强制全屏-->
--QQ强制全屏-->
--UC应用模式-->
--QQ应用模式-->
--windowsphone点击无高光-->
常见问题:
· 移动端如何定义字体font-family
@--------------------------------------中文字体的英文名称
@宋体 SimSun
@黑体 SimHei
@微信雅黑 MicrosoftYahei
@微软正黑体MicrosoftJhengHei
@新宋体 NSimSun
@新细明体 MingLiU
@细明体 MingLiU
@标楷体 DFKai-SB
@仿宋 FangSong
@楷体 KaiTi
@仿宋 FangSong
@楷体 KaiTi
@
@说明:
中文字体多数使用宋体、雅黑,英文用Helvetica
body{font-family:
MicrosoftYahei,SimSun,Helvetica;}
· 打电话发短信写邮件怎么实现
//一、打电话
0755-10086">打电话给: 0755-10086 // 二、发短信,winphone系统无效 10086">发短信给: 10086 //三、写邮件 //注: 在添加这些功能时,第一个功能以"? "开头,后面的以"&"开头 //1.普通邮件 863139978@">点击我发邮件 //2.收件地址后添加? cc=开头,可添加抄送地址(Android存在兼容问题) 863139978@? cc=zhangqian0406@">点击我发邮件 //3.跟着抄送地址后,写上&bcc=,可添加密件抄送地址(Android存在兼容问题) 863139978@? cc=zhangqian0406@&bcc=384900096@">点击我发邮件 //4.包含多个收件人、抄送、密件抄送人,用分号(;)隔开多个邮件人的地址 863139978@;384900096@">点击我发邮件 //5.包含主题,用? subject= 863139978@? subject=邮件主题">点击我发邮件 //6.包含内容,用? body=;如内容包含文本,使用%0A给文本换行 863139978@? body=邮件主题内容%0A腾讯诚信%0A期待您的到来">点击我发邮件 //7.内容包含链接,含http(s): //等的文本自动转化为链接 863139978@? body=">点击我发邮件 //8.内容包含图片(PC不支持) 863139978@? body= //9.完整示例 863139978@;384900096@? cc=zhangqian0406@&bcc=993233461@&subject=[邮件主题]&body=腾讯诚邀您参与%0A%0A%0A%0A · 移动端touch事件(区分webkit和winphone) /*当用户手指放在移动设备在屏幕上滑动会触发的touch事件*/ //以下支持webkit touchstart——当手指触碰屏幕时候发生。 不管当前有多少只手指 touchmove——当手指在屏幕上滑动时连续触发。 通常我们再滑屏页面,会调用event的preventDefault()可以阻止默认情况的发生: 阻止页面滚动 touchend——当手指离开屏幕时触发 touchcancel——系统停止跟踪触摸时候会触发。 例如在触摸过程中突然页面alert()一个提示框,此时会触发该事件,这个事件比较少用 //TouchEvent说明: touches: 屏幕上所有手指的信息 targetTouches: 手指在目标区域的手指信息 changedTouches: 最近一次触发该事件的手指信息 touchend时,touches与targetTouches信息会被删除,changedTouches保存的最后一次的信息,最好用于计算手指信息 //参数信息(changedTouches[0]) clientX、clientY在显示区的坐标 target: 当前元素 //事件响应顺序 ontouchstart >ontouchmove >ontouchend>onclick //以下支持winphone8 MSPointerDown——当手指触碰屏幕时候发生。 不管当前有多少只手指 MSPointerMove——当手指在屏幕上滑动时连续触发。 通常我们再滑屏页面,会调用css的html{-ms-touch-action: none;}可以阻止默认情况的发生: 阻止页面滚动 MSPointerUp——当手指离开屏幕时触发 · 移动端click屏幕产生200-300ms的延时响应 说明: 移动设备上的web网页是有300ms延迟的,玩玩会造成按钮点击延迟甚至是点击失效。 以下是历史原因,来源一个公司内一个同事的分享: 2007年苹果发布首款iphone上IOS系统搭载的safari为了将适用于PC端上大屏幕的网页能比较好的展示在手机端上,使用了双击缩放(doubletaptozoom)的方案,比如你在手机上用浏览器打开一个PC上的网页,你可能在看到页面内容虽然可以撑满整个屏幕,但是字体、图片都很小看不清,此时可以快速双击屏幕上的某一部分,你就能看清该部分放大后的内容,再次双击后能回到原始状态。 双击缩放是指用手指在屏幕上快速点击两次,iOS自带的Safari浏览器会将网页缩放至原始比例。 原因就出在浏览器需要如何判断快速点击上,当用户在屏幕上单击某一个元素时候,例如跳转链接 那么这个时间区间t有多少呢? 在IOSsafari下,大概为300毫秒。 这就是延迟的由来。 造成的后果用户纯粹单击页面,页面需要过一段时间才响应,给用户慢体验感觉,对于web开发者来说是,页面js捕获click事件的回调函数处理,需要300ms后才生效,也就间接导致影响其他业务逻辑的处理。 //解决方案: fastclick可以解决在手机上点击事件的300ms延迟 zepto的touch模块,tap事件也是为了解决在click的延迟问题 · Rentina显示屏原理及设计方案 说明: retina屏是一种具备超高像素密度的液晶屏,同样大小的屏幕上显示的像素点由1个变为多个,如在同样带下的屏幕上,苹果设备的retina显示屏中,像素点1个变为4个。 在高清显示屏中的位图被放大,图片会变得模糊,因此移动端的视觉稿通常会设计为传统PC的2倍。 那么,前端的应对方案是: 设计稿切出来的图片长宽保证为偶数,并使用backgroud-size把图片缩小为原来的1/2 //例如图片宽高为: 200px*200px,那么写法如下 .css{width: 100px;height: 100px;background-size: 100px100px;} //其它元素的取值为原来的1/2,例如视觉稿40px的字体,使用样式的写法为20px .css{font-size: 20px} //image-set设计Rentina背景图 image-set,webkit私有属性,也是CSS4的属性,为解决Rentina屏幕下的图像而生。 .css{ background: url(images/bg.jpg)no-repeatcenter; background: -webkit-image-set( url(images/bg.jpg)1x, //支持image-set普通屏 url(images/bg-2x.jpg)2x);//支持image-set的Rentinan } · 点击元素产生背景或边框怎么去掉 /ios用户点击一个链接,会出现一个半透明灰色遮罩,如果想要禁用,可设置-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下 · 美化表单元素 //一、使用appearance改变webkit浏览器的默认外观 input,select{-webkit-appearance: none;appearance: none;} //二、winphone下,使用伪元素改变表单元素默认外观 //1.禁用select默认箭头,: : -ms-expand修改表单控件下拉箭头,设置隐藏并使用背景图片来修饰 select: : -ms-expand{display: none;} //2.禁用radio和checkbox默认样式,: : -ms-check修改表单复选框或单选框默认图标,设置隐藏并使用背景图片来修饰 input[type=radio]: : -ms-check, input[type=checkbox]: : -ms-check{display: none;} //3.禁用pc端表单输入框默认清除按钮,: : -ms-clear修改清除按钮,设置隐藏并使用背景图片来修饰 input[type=text]: : -ms-clear, input[type=tel]: : -ms-clear, input[type=number]: : -ms-clear{display: none;} · 移动端字体单位font-size选择px还是rem //如需适配多种移动设备,建议使用rem。 以下为参考值: html{font-size: 62.5%;} //10*16=62.5% //设置12px字体 这里注意在rem前要加上对应的px值,解决不支持rem的浏览器的兼容问题,做到优雅降级 body{font-size: 12px;font-size: 1.2rem;} · 超实用的CSS样式 //去掉webkit的滚动条——display: none; //其他参数 : : -webkit-scrollba//滚动条整体部分 : : -webkit-scrollbar-thumb //滚动条内的小方块 : : -webkit-scrollbar-track //滚动条轨道 : : -webkit-scrollbar-button //滚动条轨道两端按钮 : : -webkit-scrollbar-track-piece //滚动条中间部分,内置轨道 : : -webkit-scrollbar-corner //边角,两个滚动条交汇处 : : -webkit-resizer //两个滚动条的交汇处上用于通过拖动调整元素大小的小控件 //禁止长按链接与图片弹出菜单 a,img{-webkit-touch-callout: none} //禁止ios和android用户选中文字 html,body{-webkit-user-select: none;user-select: none;} //改变输入框placeholder的颜色值 : : -webkit-input-placeholder{/*WebKitbrowsers*/ color: #999;} : -moz-placeholder{/*MozillaFirefox4to18*/ color: #999;} : : -moz-placeholder{/*MozillaFirefox19+*/ color: #999;} : -ms-input-placeholder{/*InternetExplorer10+*/ color: #999;} input: focus: : -webkit-input-placeholder{color: #999;} //android上去掉语音输入按钮 input: : -webkit-input-speech-button{display: none} //阻止windowsPhone的默认触摸事件 /*说明: winphone下默认触摸事件事件使用e.preventDefault是无效的,可通过样式来禁用,如: */ html{-ms-touch-action: none;}//禁止winphone默认触摸事件 · 取消input在ios下,输入的时候英文首字母的默认大写 · 手机拍照和上传图片 //IOS有拍照、录像、选取本地图片功能,部分Android只有选择本地图片功能。 Winphone不支持 · 屏幕旋转的事件和样式 //JS处理 functionorientInit(){ varorientChk=document.documentElement.clientWidth>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){ } · audio元素和video元素在ios和andriod中无法自动播放 //音频,写法一 //音频,写法二 优先播放音乐bg.ogg,不支持在播放bg.mp3 /
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- H5 项目 常见问题 汇总 解决方案