整理经常在H5移动端开发遇到的知识

来源:http://www.chinese-glasses.com 作者:Web前端 人气:193 发布时间:2020-04-15
摘要:时间: 2019-10-03阅读: 183标签: 移动端 时间: 2018-05-21阅读: 1050标签:移动端1、防止手机中网页放大和缩小,这点是最基本的,最为手机网站开发者来说应该都知道的,就是设置meta中的view

时间: 2019-10-03阅读: 183标签: 移动端

时间: 2018-05-21阅读: 1050标签: 移动端1、防止手机中网页放大和缩小,这点是最基本的,最为手机网站开发者来说应该都知道的,就是设置meta中的viewport使用viewport使页面禁止缩放。 通常把user-scalable设置为0来关闭用户对页面视图缩放的行为。meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"2、苹果手机的一些设置。meta name="apple-mobile-web-app-capable" content="yes"如果content设置为yes,Web应用会以全屏模式运行,反之,则不会。content的默认值是no,表示正常显示。你可以通过只读属性window.navigator.standalone来确定网页是否以全屏模式显示。3、format-detection设置。meta name="format-detection" content="telephone=no"meta name="format-detection" content="email=no"format-detection 启动或禁用自动识别页面中的电话号码、邮箱地址。1.标准的电话号码格式是这样的:a href="tel:1-408-555-5555"1-408-555-5555/a,点击后会自动打开电话功能;4、上下拉动滚动条时卡顿、慢 body { -webkit-overflow-scrolling: touch; //苹果手机 overflow-scrolling: touch;}5、禁止复制、选中文本 * {-webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }6、长时间按住页面出现闪退element { -webkit-touch-callout: none;}7、iphone及ipad下输入框默认内阴影Element{ -webkit-appearance: none; }8、ios和android下触摸元素时出现半透明灰色遮罩Element { -webkit-tap-highlight-color:rgba(255,255,255,0)}8.1、苹果输入框点击不放大meta content="yes" name="apple-mobile-web-app-capable"meta name="viewport" content="width=device-width,height=device-height,inital-scale=1.0,maximum-scale=1.0,user-scalable=no;"9、active兼容处理 即 伪类 :active 失效方法一:body添加ontouchstartbody ontouchstart=""方法二:js给 document 绑定 touchstart 或 touchend 事件stylea { color: #000;}a:active { color: #fff;}/stylea herf=foo bar/ascript document.addEventListener('touchstart',function(){},false);/script10、动画定义3D启用硬件加速Element { -webkit-transform:translate3d(0, 0, 0) transform: translate3d(0, 0, 0);}注意:3D变形会消耗更多的内存与功耗11、Retina屏的1px边框Element{ border-width: thin;}12、旋转屏幕时,字体大小调整的问题*{ -webkit-text-size-adjust:100%; }13、顶部状态栏背景色meta name="apple-mobile-web-app-status-bar-style" content="black" /说明:除非你先使用apple-mobile-web-app-capable指定全屏模式,否则这个meta标签不会起任何作用。如果content设置为default,则状态栏正常显示。如果设置为blank,则状态栏会有一个黑色的背景。如果设置为blank-translucent,则状态栏显示为黑色半透明。如果设置为default或blank,则页面显示在状态栏的下方,即状态栏占据上方部分,页面占据下方部分,二者没有遮挡对方或被遮挡。如果设置为blank-translucent,则页面会充满屏幕,其中页面顶部会被状态栏遮盖住(会覆盖页面20px高度,而iphone4和itouch4的Retina屏幕为40px)。默认值是default。兼容性iOS 2.1 +14、设置缓存meta http-equiv="Cache-Control" content="no-cache" /手机页面通常在第一次加载后会进行缓存,然后每次刷新会使用缓存而不是去重新向服务器发送请求。如果不希望使用缓存可以设置no-cache。15、桌面图标link rel="apple-touch-icon" href="touch-icon-iphone.png" /link rel="apple-touch-icon" sizes="76x76" href="touch-icon-ipad.png" /link rel="apple-touch-icon" sizes="120x120" href="touch-icon-iphone-retina.png" /link rel="apple-touch-icon" sizes="152x152" href="touch-icon-ipad-retina.png" /16、浏览器私有及其它meta全屏模式meta name="x5-fullscreen" content="true"强制竖屏meta name="x5-orientation" content="portrait"强制横屏meta name="x5-orientation" content="landscape"应用模式meta name="x5-page-mode" content="app"UC浏览器私有全屏模式meta name="full-screen" content="yes"强制竖屏meta name="screen-orientation" content="portrait"强制横屏meta name="screen-orientation" content="landscape"应用模式meta name="browsermode" content="application"其它针对手持设备优化,主要是针对一些老的不识别viewport的浏览器,比如黑莓meta name="HandheldFriendly" content="true"微软的老式浏览器meta name="MobileOptimized" content="320"windows phone 点击无高光meta name="msapplication-tap-highlight" content="no"17、IOS中input键盘事件keyup、keydown、keypress支持不是很好问题是这样的,用input search做模糊搜索的时候,在键盘里面输入关键词,会通过ajax后台查询,然后返回数据,然后再对返回的数据进行关键词标红。用input监听键盘keyup事件,在安卓手机浏览器中是可以的,但是在ios手机浏览器中变红很慢,用输入法输入之后,并未立刻相应keyup事件,只有在通过删除之后才能相应!解决方法:可以用html5的oninput事件去代替keyupinput type="text" script type="text/javascript" document.getElementById('testInput').addEventListener('input', function(e){ var value = e.target.value; });/script18、被点击元素的外观变化,可以使用样式来设定-webkit-tap-highlight-color: 颜色19、判断软键盘弹出android上,当软键盘状态改变的时候,会触发window的resize事件,所以我们可以进入页面的时候保存一次window.innerHeight的值,当window的resize事件触发的时候,比较window.innerHeight的值与前一次保存的window.innerHeight的值大小来判断软键盘的收拢和弹出状态。var winHeight = window.innerHeight; if (isAndroid) { window.addEventListener('resize', function(e) { var tempHeight = window.innerHeight if (tempHeight winHeight) { bShowRec = false; } else { bShowRec = true; } }); }ios上,软键盘状态改变的时候,不会触发window的resize事件,但是当软键盘的“完成”按钮被点击的时候,会触发onblur事件。所以正常通过onfocus和onblur事件来判断就行。20、阻止旋转屏幕时自动调整字体大小html, body, form, fieldset, p, div, h1, h2, h3, h4, h5, h6 {-webkit-text-size-adjust:none;}21、禁止body滚动document.body.ontouchmove=function(e){ e.preventDefault(); }22.拍照上传input type=file accept="video/*"input type=file accept="image/*"

viewport、强制浏览器全屏、IOS的Web APP模式、可点击元素出现阴影(这个我觉得真没必要去掉,用户点击是需要反馈的,而这个背景色刚刚好提供了一种反馈)等等,太多啦,这些相信大家百度一下就可以查到很多资料

本篇文章主要是讲一些其他的或者优化手段。内容不多

  1. 弹出数字键盘

    !-- 有"#" ""符号输入 --input type="tel"!-- 纯数字 --input pattern="d"

安卓跟IOS的表现形式应该不一样,大家可以自己试试。当运用了正则pattern后,就不用关注input的类型了

  1. 调用系统的某些功能

    !-- 拨号 --a href="tel:10086"打电话给: 10086/a!-- 发送短信 --a href="sms:10086"发短信给: 10086/a!-- 发送邮件 --a href="mailto:839626987@qq.com"发邮件给:839626987@qq.com/a!-- 选择照片或者拍摄照片 --input type="file" accept="image/"!-- 选择视频或者拍摄视频 --input type="file" accept="video/"!-- 多选 --input type="file" multiple

  2. 打开原生应用

    a href="weixin://"打开微信/aa href="alipays://"打开支付宝/aa href="alipays://platformapi/startapp?saId=10000007"打开支付宝的扫一扫功能/aa href="alipays://platformapi/startapp?appId=60000002"打开支付宝的蚂蚁森林/a

这种方式叫做URL Scheme,是一种协议,一般用来访问APP或者APP中的某个功能/页面(如唤醒APP后打开指定页面或者使用某些功能)

URL Scheme的基本格式如下:

 行为(应用的某个功能/页面) |scheme://[path][?query] | |应用标识 功能需要的参数

一般是由APP开发者自己定义,比如规定一些参数或者路径让其他开发者来访问,就像上面的例子

注意事项:

唤醒APP的条件是你的手机已经安装了该APP某些浏览器会禁用此协议,比如微信内部浏览器(除非开了白名单)

后面应该会专门写一篇文章用来探讨唤醒APP

  1. 解决active伪类失效

    bodyontouchstart/body

给body注册一个空事件即可

  1. 忽略自动识别

    !-- 忽略浏览器自动识别数字为电话号码 --meta name="format-detection" content="telephone=no"!-- 忽略浏览器自动识别邮箱账号 --meta name="format-detection" content="email=no"

当页面上的内容包含了手机号/邮箱等,会自动转换成可点击的链接

比如你有如下代码:

p13192733603/P

但是有些浏览器会识别为手机,并且可以点击拨号

  1. 解决input失焦后页面没有回弹

一般出现在IOS设备中的微信内部浏览器,出现的条件为:

页面高度过小聚焦时,页面需要往上移动的时候

所以一般input在页面上方或者顶部都不会出现无法回弹

解决办法为,在聚焦时,获取当前滚动条高度,然后失焦时,赋值之前获取的高度:

template input type="text" @focus="focus" @blur="blur"/templatescript export default { data() { return { scrollTop: 0 } }, methods: { focus() { this.scrollTop = document.scrollingElement.scrollTop; }, blur() { document.scrollingElement.scrollTo(0, this.scrollTop); } } }/script
  1. 禁止长按

以上行为可以总结成这几个(每个手机以及浏览器的表现形式不一样):长按图片保存、长按选择文字、长按链接/手机号/邮箱时呼出菜单。

想要禁止这些浏览器的默认行为,可以使用以下CSS:

本文由10bet发布于Web前端,转载请注明出处:整理经常在H5移动端开发遇到的知识

关键词:

上一篇:没有了

下一篇:没有了

最火资讯