H5移动端开发注意事项

最新推荐文章于 2024-04-28 21:35:24 发布

pinbolei

最新推荐文章于 2024-04-28 21:35:24 发布

阅读量458

点赞数 2

分类专栏：前端 html css 文章标签： web app html5 vue css

本文链接：https://blog.csdn.net/pinbolei/article/details/103692645

版权

前端同时被 3 个专栏收录

40 篇文章 1 订阅

订阅专栏

html

6 篇文章 0 订阅

订阅专栏

css

3 篇文章 0 订阅

订阅专栏

一、关于meta

(一)、常用的公共meta属性

1、viewport

<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no" />

属性	属性
width=device-width	宽度=设备屏幕的宽度（px）
minimum-scale	允许用户缩放到的最小比例
maximum-scale	允许用户缩放到的最大比例
user-scalable	用户是否可以手动缩放

2、Format-detection(格式检测)

**默认情况下，设备会自动识别任何可能是电话号码的字符串。设置telephone=no可以禁用这项功能。

<meta name="format-detection" content="telephone=no,email=no,adress=no"/>

如果禁用，html5提供了自动调用拨号的标签，只要在a标签的href中添加tel:就可以了。
固话:

<a href="tel:01012345678,110">010-12345678 转110</a>

手机：

<a href="tel:13011111111">13011111111</a>

3、设置缓存

<meta http-equiv="Cache-Control" content="no-cache" />

手机页面通常在第一次加载后会进行缓存，然后每次刷新会使用缓存而不是去重新向服务器发送请求。
如果不希望使用缓存可以设置no-cache。

(二)、iOS私有meta属性

1、是否全屏显示

<meta name="apple-mobile-web-app-capable" content="yes"/>
<meta name="apple-touch-fullscreen" content="yes"/>

网站开启对web app程序的支持。

若content设置为yes，Web应用会以全屏模式运行，反之不会。

content默认值为no，表示正常显示。

可以通过制度属性window.navigator.standalone来确定是否以全屏模式显示。

为了更好的兼容性，以上两个meta可以都写上！

2、web app应用下状态条（屏幕顶部条）颜色

<meta name="apple-mobile-web-app-status-bar-style" content="black"/>

除非先使用apple-mobile-web-app-capable指定全屏模式，否则这个meta标签不会起任何作用。

默认值为default（白色），可以定位black(黑色)和black-translucent(灰色半透明)。

若值为"black-translucent"将会占据页面px位置，浮在页面上方（会覆盖页面20px高度-iPhone4和iTouch4的Retina屏幕为40px）

3、添加至主屏幕设置

Safari浏览器中点击添加至主屏幕按钮，会默认生成一个截图的图标，相当于浏览器创建了一个快捷方式。
添加至主屏幕后，桌面图片和启动画面的设置
桌面图标设置：

<!--立体有光感-->
<link rel="apple-touch-icon" type="text/css" href="touch-icon-iphone.png"/>

<!--设计原图显示-->
<link rel="apple-touch-icon-precomposed" type="text/css" href="touch-icon-iphone.png"/>

图片尺寸可以设定为57_57（px）或者Retina可以定为114_114（px），ipad尺寸为72*72（px)。
启动画面设置：

<link rel="apple-touch-startup-image" type="text/css" href="wendd_startup.png"/>

iOS下页面启动加载时显示的画面图片，避免加载时的白屏。
可以通过madia来指定不同的大小：

<!--iPhone-->
<link href="apple-touch-startup-image-320x460.png" media="(device-width: 320px)" rel="apple-touch-startup-image" />
<!-- iPhone Retina -->
<link href="apple-touch-startup-image-640x920.png" media="(device-width: 320px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image" />
<!-- iPhone 5 -->
<link rel="apple-touch-startup-image" media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2)" href="apple-touch-startup-image-640x1096.png">
<!-- iPad portrait -->
<link href="apple-touch-startup-image-768x1004.png" media="(device-width: 768px) and (orientation: portrait)" rel="apple-touch-startup-image" />
<!-- iPad landscape -->
<link href="apple-touch-startup-image-748x1024.png" media="(device-width: 768px) and (orientation: landscape)" rel="apple-touch-startup-image" />
<!-- iPad Retina portrait -->
<link href="apple-touch-startup-image-1536x2008.png" media="(device-width: 1536px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image" />
<!-- iPad Retina landscape -->
<link href="apple-touch-startup-image-1496x2048.png"media="(device-width: 1536px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2)"rel="apple-touch-startup-image" />

二、关于样式

1、上下拉动滚动条时卡顿、慢

body{
    overflow-scrolling: touch;
    -webkit-overflow-scrolling: touch;
}

2、禁止复制、选中文本

Element{
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

注：解决移动设备可选中页面文本（视产品需求而定）

3、长时间按住页面出现闪退

Element{
    -webkit-touch-callout: none;
}

4、iPhone和iPad下输入框默认内阴影

Element{
    -webkit-appearance: none;
}

5、iPhone和Android下触摸元素时出现半透明灰色遮罩

Element{
    -webkit-tap-highlight-color: rgba(255,255,255,0);
}

设置alpha值为0，可以去除班都没灰色遮罩
注：transparent的属性值在Android下无效。

6、active兼容处理（伪类 :active 失效）

<body ontouchstart="">

或给 document 绑定 touchstart 或 touchend 事件

<style>
a {
  color: #000;
}
a:active {
  color: #fff;
}
</style>
<a herf=foo >bar</a>
<script>
  document.addEventListener('touchstart',function(){},false);
</script>

7、动画定义3D启用硬件加速

Element{
    transform: translate3d(0,0,0);
    -webkit-transform: translate3d(0,0,0);
}

8、Retina屏的1px边框

Element{
    border-width: thin;
}

9、旋转屏幕时，字体大小调整的问题

html,body,form,fieldset,p,div,h1,h2,h3,h4,h5,h6{
    -webkit-text-size-adjust: 100%;
}

10、transition闪屏

设置内嵌的元素在3D空间，保留3D

Element{
    -webkit-transform-style: preserve-3d;
}

设置进行转换的元素的背面在面对用户是是否可见：隐藏

Element{
    -webkit-backface-visibility:hidden;
}

11、圆角bug

某些Android手机圆角失效

Element{
    background-clip:padding-box;
}

pinbolei

关注

2
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
H5移动端开发注意事项

一、关于meta(一)、常用的公共meta属性1、viewport<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no" />属性属性width=device-width...
复制链接

扫一扫

专栏目录