移动端网页开发之注意点

最新推荐文章于 2022-09-09 09:55:00 发布

fengGer的bugs

最新推荐文章于 2022-09-09 09:55:00 发布

阅读量561

点赞数

CC 4.0 BY-SA版权

分类专栏：移动端文章标签：移动端开发注意点

本文链接：https://blog.youkuaiyun.com/qq_41224512/article/details/88620491

移动端专栏收录该内容

1 篇文章

订阅专栏

有如下几点：

1、webkit内核中的一些私有的meta标签，这些meta标签在开发webapp时起到非常重要的作用:

//	第一个meta标签表示：强制让文档的宽度与设备的宽度保持1:1，并且文档最大的宽度
比例是1.0，且不允许用户点击屏幕放大浏览
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">

//	第二个meta标签是iphone设备中的safari私有meta标签，它表示：允许全屏模式浏览
<meta content="yes" name="apple-mobile-web-app-capable">

//	第三个meta标签也是iphone的私有标签，它指定的iphone中safari顶端的状态条的样式
<meta content="black" name="apple-mobile-web-app-status-bar-style">

//	第四个meta标签表示：告诉设备忽略将页面中的数字识别为电话号码
<meta content="telephone=no" name="format-detection">

2、放弃CSS float属性:

在项目开发过程中可以会遇到内容排列显示的布局，假如你遇见这样的视觉稿，建议你放弃float，可以直接使用: display:inline-block

3、HTML5标签的使用：

在开始编写webapp时，建议前端工程师使用HTML5，而放弃HTML4，因为HTML5可以实现一些HTML4中无法实现的丰富的WEB应用程序的体验，可以减少开发者很多的工作量，当然了你决定使用HTML5前，一定要对此非常熟悉，要知道HTML5的新标签的作用。比如定义一块内容或文章区域可使用section标签，定义导航条或选项卡可以直接使用nav标签等等。

4、利用CSS3边框背景属性：

这个按钮有圆角效果，有内发光效果还有高光效果，这样的按钮使用CSS3写是无法写出来的，当然圆角可以使用CSS3来写，但高光和内发光却无法使用CSS3编写，
这个时候你不妨使用-webkit-border-image来定义这个按钮的样式。
-webkit-border-image就个很复杂的样式属性。

5、块级化a标签：

保证将每条数据都放在一个a标签中，为何这样做？
因为在触控手机上，为提升用户体验，尽可能的保证用户的可点击区域较大。

6、自适应布局模式：

在编写CSS时，不建议前端工程师把容器（不管是外层容器还是内层）的宽度定死。为达到适配各种手持设备，我建议前端工程师使用自适应布局模式（如支付宝采用了自适应布局模式），因为这样做可以让你的页面在ipad、itouch、ipod、iphone、android、web safarik、chrome都能够正常的显示，你无需再次考虑设备的分辨率。

7、学会使用webkit-box：

运用webkit为display属性提供了一个webkit-box的值，它可以帮助前端工程师做到盒子模型灵活控制

8、如何去除Android平台中对邮箱地址的识别：

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

9、如何去除iOS和Android中的输入URL的控件条：

利用一句简单的javascript代码来实现这个效果：setTimeout(scrollTo,0,0,0);

10、如何关闭iOS中键盘自动大写

在iOS中，当虚拟键盘弹出时，默认情况下键盘是开启首字母大写的功能的，根据某些业务场景，可能我们需要关闭这个功能，移动版本webkit为input元素提供了autocapitalize属性，通过指定autocapitalize=”off”来关闭键盘默认首字母大写

11、添加智能 App 广告条 Smart App Banner（IOS 6+ Safari）：

<meta name="apple-itunes-app" content="app-id=myAppStoreID, 
affiliate-data=myAffiliateData, app-argument=myURL">

12、viewport模板：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
<meta content="yes" name="apple-mobile-web-app-capable">
<meta content="black" name="apple-mobile-web-app-status-bar-style">
<meta content="telephone=no" name="format-detection">
<meta content="email=no" name="format-detection">
<title>标题</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
这里开始内容
</body>
</html>

13、移动端如何定义字体font-family：

三大手机系统的字体：

ios 系统

默认中文字体是Heiti SC
默认英文字体是Helvetica
默认数字字体是HelveticaNeue
无微软雅黑字体
android 系统
默认中文字体是Droidsansfallback
默认英文和数字字体是Droid Sans
无微软雅黑字体

winphone 系统

默认中文字体是Dengxian(方正等线体)
默认英文和数字字体是Segoe
无微软雅黑字体
各个手机系统有自己的默认字体，且都不支持微软雅黑如无特殊需求，手机端无需定义中文字体，使用系统默认英文字体和数字字体可使用 Helvetica ，三种系统都支持

/* 移动端定义字体的代码 */
body{font-family:Helvetica;}

14、移动端字体单位font-size选择px还是rem

对于只需要适配手机设备，使用px即可

对于需要适配各种移动设备，使用rem，例如只需要适配iPhone和iPad等分辨率差别比较挺大的设备

rem配置参考：

html {font-size:10px}
@media screen and (min-width:480px) and (max-width:639px) {
    html {
        font-size: 15px
    }
}
@media screen and (min-width:640px) and (max-width:719px) {
    html {
        font-size: 20px
    }
}
@media screen and (min-width:720px) and (max-width:749px) {
    html {
        font-size: 22.5px
    }
}
@media screen and (min-width:750px) and (max-width:799px) {
    html {
        font-size: 23.5px
    }
}
@media screen and (min-width:800px) and (max-width:959px) {
    html {
        font-size: 25px
    }
}
@media screen and (min-width:960px) and (max-width:1079px) {
    html {
        font-size: 30px
    }
}
@media screen and (min-width:1080px) {
    html {
        font-size: 32px
    }
}

15、移动端touch事件(区分webkit 和 winphone)

当用户手指放在移动设备在屏幕上滑动会触发的touch事件

以下支持webkit

touchstart——当手指触碰屏幕时候发生。不管当前有多少只手指
touchmove——当手指在屏幕上滑动时连续触发。通常我们再滑屏页面，会调用event的 preventDefault()可以阻止默认情况的发生：阻止页面滚动
touchend——当手指离开屏幕时触发
touchcancel——系统停止跟踪触摸时候会触发。例如在触摸过程中突然页面alert()一个提示框，此时会触发该事件，这个事件比较少用

以下支持winphone 8

MSPointerDown——当手指触碰屏幕时候发生。不管当前有多少只手指
MSPointerMove——当手指在屏幕上滑动时连续触发。通常我们再滑屏页面，会调用css的html{-ms-touch-action: none;}可以阻止默认情况的发生：阻止页面滚动
MSPointerUp——当手指离开屏幕时触发

16、移动端click屏幕产生200-300 ms的延迟响应：

移动设备上的web网页是有300ms延迟的，玩玩会造成按钮点击延迟甚至是点击失效

17、上下拉动滚动条时卡顿、慢：

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

18、禁止复制、选中文本：

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

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

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

20、iphone及ipad下输入框默认内阴影：

Element{
    -webkit-appearance: none; 
}

21、active兼容处理即伪类 :active 失效：

方法一：body添加ontouchstart

<body ontouchstart="">

方法二：js给 document 绑定 touchstart 或 touchend 事件

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

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

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

注意：3D变形会消耗更多的内存与功耗

23、Retina屏的1px边框

Element{
    border-width: thin;
}

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

*{
   -webkit-text-size-adjust:100%;  
}

25、顶部状态栏背景色

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

26、浏览器私有及其它meta :

QQ浏览器私有

全屏模式

<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">

微软的老式浏览器

windows phone 点击无高光

<meta name="msapplication-tap-highlight" content="no">

27、OS中input键盘事件keyup、keydown、keypress支持不是很好：

问题是这样的，用input search做模糊搜索的时候，在键盘里面输入关键词，会通过ajax后台查询，然后返回数据，然后再对返回的数据进行关键词标红。用input监听键盘keyup事件，在安卓手机浏览器中是可以的，但是在ios手机浏览器中变红很慢，用输入法输入之后，并未立刻相应keyup事件，只有在通过删除之后才能相应！

解决方法：可以用html5的oninput事件去代替keyup

<input type="text" id="testInput">
<script type="text/javascript">
    document.getElementById(‘testInput‘).addEventListener(‘input‘, function(e){
        var value = e.target.value;
    });
</script>