移动前端知识总结.docx
- 文档编号:6591842
- 上传时间:2023-01-08
- 格式:DOCX
- 页数:14
- 大小:23.11KB
移动前端知识总结.docx
《移动前端知识总结.docx》由会员分享,可在线阅读,更多相关《移动前端知识总结.docx(14页珍藏版)》请在冰豆网上搜索。
移动前端知识总结
移动前端知识总结
目录
移动前端知识总结1
1.meta基础知识1
2.常见问题3
3.常用的移动端框架14
1.meta基础知识
H5页面窗口自动调整到设备宽度,并禁止用户缩放页面
content="width=device-width, initial-scale=1.0, minimum-scale=1.0,maximum-scale=1.0, user-scalable=no"/> 忽略将页面中的数字识别为电话号码 content="telephone=no"/> 忽略Android平台中对邮箱地址的识别 content="email=no"/> 当网站添加到主屏幕快速启动方式,可隐藏地址栏,仅针对ios的safari apple-mobile-web-app-capable" content="yes"/> --ios7.0版本以后,safari上已看不到效果--> 将网站添加到主屏幕快速启动方式,仅针对ios的safari顶端状态条的样式 content="black"/> --可选default、black、black-translucent--> viewport模板 viewport模板——通用 DOCTYPEhtml> width=device-width,initial-scale=1.0, maximum-scale=1.0, user-scalable=no"name="viewport"> name="apple-mobile-web-app-capable"> name="apple-mobile-web-app-status-bar-style"> name="format-detection"> name="format-detection"> href="index.css"> 这里开始内容 viewport模板–target-densitydpi=device-dpi,android2.3.5以下版本不支持 DOCTYPEhtml> content="width=750, user-scalable=no, target-densitydpi=device-dpi"> --width取值与页面定义的宽度一致--> name="apple-mobile-web-app-capable"> name="apple-mobile-web-app-status-bar-style"> name="format-detection"> name="format-detection"> href="index.css"> 这里开始内容 2.常见问题 移动端如何定义字体font-family 中文字体使用系统默认即可,英文用Helvetica /*移动端定义字体的代码*/ body{font-family: Helvetica;} 移动端字体单位font-size选择px还是rem 对于只需要适配少部分手机设备,且分辨率对页面影响不大的,使用px即可 对于需要适配各种移动设备,使用rem,例如只需要适配iphone和iPad等分辨率差别比较挺大的设备 rem配置参考: html{font-size: 10px} @mediascreenand (min-width: 321px) and(max-width: 375px) {html{font-size: 11px}} @mediascreen and(min-width: 376px) and(max-width: 414px) {html{font-size: 12px}} @mediascreenand (min-width: 415px)and (max-width: 639px) {html{font-size: 15px}} @mediascreenand (min-width: 640px) and(max-width: 719px) {html{font-size: 20px}} @mediascreenand (min-width: 720px) and(max-width: 749px) {html{font-size: 22.5px}} @mediascreenand (min-width: 750px)and (max-width: 799px) {html{font-size: 23.5px}} @mediascreenand (min-width: 800px){html{font-size: 25px}} 移动端touch事件(区分webkit和winphone) 当用户手指放在移动设备在屏幕上滑动会触发的touch事件 以下支持webkit touchstart——当手指触碰屏幕时候发生。 不管当前有多少只手指 touchmove——当手指在屏幕上滑动时连续触发。 通常我们再滑屏页面,会调用event的preventDefault()可以阻止默认情况的发生: 阻止页面滚动 touchend——当手指离开屏幕时触发 touchcancel——系统停止跟踪触摸时候会触发。 例如在触摸过程中突然页面alert()一个提示框,此时会触发该事件,这个事件比较少用 TouchEvent touches: 屏幕上所有手指的信息 targetTouches: 手指在目标区域的手指信息 changedTouches: 最近一次触发该事件的手指信息 touchend时,touches与targetTouches信息会被删除,changedTouches保存的最后一次的信息,最好用于计算手指信息 clientX、clientY在显示区的坐标 target: 当前元素 以下支持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的延迟问题 触摸事件的响应顺序 ontouchstart ontouchmove ontouchend onclick 解决300ms延迟的问题,也可以通过绑定ontouchstart事件,加快对事件的响应 什么是Retina显示屏,带来了什么问题 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} ios系统中元素被触摸时产生的半透明灰色遮罩怎么去掉 ios用户点击一个链接,会出现一个半透明灰色遮罩,如果想要禁用,可设置-webkit-tap-highlight-color的alpha值为0,也就是属性值的最后一位设置为0就可以去除半透明灰色遮罩 a,button,input,textarea {-webkit-tap-highlight-color: rgba(0,0,0,0;)} 部分android系统中元素被点击时产生的边框怎么去掉 android用户点击一个链接,会出现一个边框或者半透明灰色遮罩,不同生产商定义出来额效果不一样,可设置-webkit-tap-highlight-color的alpha值为0去除部分机器自带的效果 a,button,input,textarea {-webkit-tap-highlight-color: rgba(0,0,0,0-webkit-user-modify: read-write-plaintext-only;} -webkit-user-modify有个副作用,就是输入法不再能够输入多个字符 对于按钮类还有个办法,不使用a或者input标签,直接用div标签 winphone系统a、input标签被点击时产生的半透明灰色背景怎么去掉 content="no"> webkit表单元素的默认外观怎么重置 .css{-webkit-appearance: none;} webkit表单输入框placeholder的颜色值能改变么 input: : -webkit-input-placeholder{ color: #AAAAAA;}input: focus: : -webkit-input-placeholder{ color: #EEEEEE;} webkit表单输入框placeholder的文字能换行么 ios可以,android不行~ 在textarea标签下都可以换行~ IE10(winphone8)表单元素默认外观如何重置 禁用select默认下拉箭头 : : -ms-expand适用于表单选择控件下拉箭头的修改,有多个属性值,设置它隐藏(display: none)并使用背景图片来修饰可得到我们想要的效果。 select: : -ms-expand {display: none;} 禁用radio和checkbox默认样式 : : -ms-check适用于表单复选框或单选按钮默认图标的修改,同样有多个属性值,设置它隐藏(display: none)并使用背景图片来修饰可得到我们想要的效果。 input[type=radio] : : -ms-check,input[type=checkbox]: : -ms-check{display: none;} 禁用PC端表单输入框默认清除按钮 当表单文本输入框输入内容后会显示文本清除按钮,: : -ms-clear适用于该清除按钮的修改,同样设置使它隐藏(display: none)并使用背景图片来修饰可得到我们想要的效果。 input[type=text] : : -ms-clear,input[type=tel]: : -ms-clear, input[type=number] : : -ms-clear{display: none;} 禁止ios长按时不触发系统的菜单,禁止ios&android长按时下载图片 .css{-webkit-touch-callout: none} 禁止ios和android用户选中文字 .css{-webkit-user-select: none} 移动端触摸按钮的效果,可明示用户有些事情正要发生,是一个比较好体验,但是移动设备中并没有鼠标指针,使用css的hover并不能满足我们的需求,还好国外有个激活css的active效果,代码如下, DOCTYPEhtml> maximum-scale=1.0, user-scalable=no"name="viewport"> name="apple-mobile-web-app-capable"> name="apple-mobile-web-app-status-bar-style"> name="format-detection"> name="format-detection"> {-webkit-tap-highlight-color: rgba(0,0,0,0);} .btn-blue{display: block;height: 42px; line-height: 42px;text-align: center; border-radius: 4px;font-size: 18px; color: #FFFFFF;background-color: #4185F3;} .btn-blue: active{background-color: #357AE8;}
document.addEventListener
("touchstart",function(){},true)
兼容性ios5+、部分android4+、winphone8
要做到全兼容的办法,可通过绑定ontouchstart和ontouchend来控制按钮的类名
DOCTYPEhtml>
maximum-scale=1.0, user-scalable=no"name="viewport"> name="apple-mobile-web-app-capable"> name="apple-mobile-web-app-status-bar-style"> content="telephone=no"name="format-detection"> name="format-detection"> a{-webkit-tap-highlight-color: rgba(0,0,0,0);} .btn-blue{display: block; height: 42px; line-height: 42px;text-align: center; border-radius: 4px;font-size: 18px; color: #FFFFFF; background-color: #4185F3;} .btn-blue-on{background-color: #357AE8;}
varbtnBlue=document.querySelector(".btn-blue");
btnBlue.ontouchstart=function(){this.className="
btn-bluebtn-blue-on"}
btnBlue.ontouchend=function()
{this.className="btn-blue"}
屏幕旋转的事件和样式
事件
window.orientation,取值:
正负90表示横屏模式、0和180表现为竖屏模式;
window.onorientationchange=function()
{switch(window.orientation)
{case-90:
case90:
alert("横屏:
"+
window.orientation);
case0:
case180:
alert
("竖屏:
"+window.orientation);break;}}
样式
//竖屏时使用的样式@mediaall
and(orientation:
portrait)
{.css{}}//横屏时使用的样式@mediaalland
(orientation:
landscape){.css{}}
audio元素和video元素在ios和andriod中无法自动播放
应对方案:
触屏即播
$('html').one('touchstart',
function(){audio.play()})
摇一摇功能
HTML5 deviceMotion:
封装了运动传感器数据的事件,可以获取手机运动状态下的运动加速度等数据。
手机拍照和上传图片
--选择照片-->
--选择视频-->
使用总结:
ios有拍照、录像、选取本地图片功能
部分android只有选取本地图片功能
winphone不支持
input控件默认外观丑陋
微信浏览器用户调整字体大小后页面矬了,怎么阻止用户调整
原因
android侧是复写了layoutinflater对textview做了统一处理
ios侧是修改了body.style.webkitTextSizeAdjust值
解决方案:
android使用以下代码,该接口只在微信浏览器下有效(感谢jationhuang同学提供)
/**
*页面加入这段代码可使Android
机器页面不再受到用户字体缩放强制改变大小
*但是会有一个1秒左右的延迟,
期间可以考虑通过loading展示
*/(function(){if(typeof(WeixinJSBridge)=="undefined")
{document.addEventListener
("WeixinJSBridgeReady",function(e)
{setTimeout(function()
{WeixinJSBridge.invoke('setFontSizeCallback',
{"fontSize":
0},
function(res)
{alert(JSON.stringify(res));});},0);});}
else{setTimeout(function()
{WeixinJSBridge.invoke
('setFontSizeCallback',
{"fontSize":
0},function(res)
{alert(JSON.stringify(res));});},0);}})();
ios使用-webkit-text-size-adjust禁止调整字体大小
body{-webkit-text-size-adjust:
100%!
important;}
最好的解决方案:
整个页面用rem或者百分比布局
消除transition闪屏
网络都是这么写的,但我并没有测试出来
.css{/*设置内嵌的元素在3D空间如何呈现:
保留3D*/-webkit-transform-style:
preserve-3d;/*
(设置进行转换的元素的背面
在面对用户时是否可见:
隐藏)
*/-webkit-backface-visibility:
hidden;}
开启硬件加速
解决页面闪白
保证动画流畅
.css{
-webkit-transf
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 移动 前端 知识 总结
![提示](https://static.bdocx.com/images/bang_tan.gif)