移动端开发需要注意的一些事情

最新推荐文章于 2019-07-29 20:52:18 发布
最新推荐文章于 2019-07-29 20:52:18 发布
阅读量496 收藏
点赞数
分类专栏： 移动开发

不知不觉,做移动端开发也有半年的时间了。从刚开始接触移动端开发,到现在的细节完善。期间也走了很多坑!为什么会走这么多坑呢?

可能身边做前端开发的朋友比较少,想找个人一起研究技术的都没。也加过一些前端群,大多数些扯淡聊天的群。没办法,只得自己去苦逼的研究!

下面一起来分享下,我做移动端开发半年来的一些经验,以及需要注意的一些东西吧!


一、关于单位的使用

相信只要做过移动端开发的人,或者刚入门的新手朋友们,最纠结的问题是在于“字体”单位的选择!为什么会这样说呢?

可能在传统的PC端来说,1px=1px的比例。而在移动端却不是这样,1px = ?。 因为出现了一个像素密度这样个东西,就不能在移动端使用“PX”这个单位。可能在你的大屏手机是1px等于1点几个像素,可能在小屏手机却刚好。就好比网页的兼容性一样,浏览器的内核不同,解析当然会有所不同!

正好,CSS3又给你出现了一个新的单位“rem”。如果有对rem还有不怎么了解的朋友,可以看看这篇文章:webapp开发之-“rem”单位。

当然出现了这样的问题,首先我们就会去问问神奇的“百度”。不是网上流传这样一个段子么:“有事找度娘,无事上度娘!”,好吧,我又邪恶了!回归正题,大多数网友给出的答案是:“给html根元素的字体大小设置font-size:62.5%,再来使用rem这个单位就能很好的解决这个问题!”

这样设置后:就会得到一个兑换比例值:1rem = 10px; 如果我们要给一个"h1"标签设置字体大小为20px的时候。我们就直接设置为rem就好了!

代码如下:

1
2
3
     html{font-size:62.5%;}
     
     h1{fon-size:2rem} ==>h1{fon-size:20px}

二、布局上

  相信布局不用我多说什么了,就按照正常的网页布局来写,一般设计师给的效果图是640*960.我们就按照320的比例来做,就是宽度减少一半。可能多数人跟我之前是一样,字体用单位“rem”。其它照样使用px这个单位。好吧!最近又被严格的UI设计师,找出问题来了,你怎么这里跟我效果图对不上呀!....

好吧!原来想偷工减料的就这样写的,没办法,既然被严格的查起来了,又得去找解决方案!(可能之前也没太在意这些细节,一直就这样拖着)

暂时找了个合适的解决方案,这样既解决了字体单位的问题,又兼容单位像素的问题!,只是换算麻烦点!

比如:我们要设置一个宽度为60px的盒子.换算成rem单位就是:60/2/20 = 1.5rem; 前提是我们需要在头部添加以下代码:

PS:效果图实际像素为60px,在手机端就是30px,在转化成rem单位就在除以20。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
html {
        font-size : 20px;
    }
    @media only screen and (min-width: 401px){
        html {
            font-size: 25px !important;
        }
    }
    @media only screen and (min-width: 428px){
        html {
            font-size: 26.75px !important;
        }
    }
    @media only screen and (min-width: 481px){
        html {
            font-size: 30px !important;
        }
    }
    @media only screen and (min-width: 569px){
        html {
            font-size: 35px !important;
        }
    }
    @media only screen and (min-width: 641px){
        html {
            font-size: 40px !important;
        }
    }

三、细节处理

    可能处理细节就是在解决兼容性的问题吧!还好手机端没有蹦出个IE来,基本都是webkit内核和IOS自带的浏览器。


1、禁止自动识别电话和android自动识别邮箱

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


 2、使用无衬线字体

1
2
3
     body {
        font-family: "Helvetica Neue", Helvetica, STHeiTi, sans-serif;
     }

iOS 4.0+ 使用英文字体 Helvetica Neue,之前的iOS版本降级使用 Helvetica。中文字体设置为华文黑体STHeiTi。需补充说明,华文黑体并不存在iOS的字体库中,但系统会自动将华文黑体 STHeiTi 兼容命中系统默认中文字体黑体-简或黑体-繁

1
2
3
4
     Heiti SC Light 黑体-简 细体 (iOS 7后废弃)
     Heiti SC Medium 黑体-简 中黑
     Heiti TC Light 黑体-繁 细体
     Heiti TC Medium 黑体-繁 中黑

原生Android下中文字体与英文字体都选择默认的无衬线字体

4.0 之前版本英文字体原生 Android 使用的是 Droid Sans,中文字体原生 Android 会命中 Droid Sans Fallback

4.0 之后中英文字体都会使用原生 Android 新的 Roboto 字体

其他第三方 Android 系统也一致选择默认的无衬线字体


3、禁止选择文本

1
2
3
4
     html, body {
        -webkit-user-select: none;   /* 禁止选中文本(如无文本选中需求,此为必选项) */
        user-select: none;
     }


4、禁止长按链接与图片弹出菜单

1
2
3
     a, img {
        -webkit-touch-callout: none; /* 禁止长按链接与图片弹出菜单 */
     }


5、去除A连接input标签,点击出现自带的阴影样式

1
2
3
     a,input{
     -webkit-tap-highlight-color:rgba(0,0,0,0);/*ios android去除自带阴影的样式*/
     }

6、屏蔽阴影:

1
     -webkit-appearance:none;

    可以同时屏蔽输入框怪异的内阴影,解决iOS下无法修改按钮样式,测试还发现一个小问题就是,加了上面的属性后,iOS下默认还是带有圆角的,不过可以使用 border-radius属性修改。


7、单击延迟

click 事件因为要等待双击确认,会有 300ms 的延迟,体验并不是很好。

开发者大多数会使用封装的 tap 事件来代替click 事件,所谓的 tap 事件由 touchstart 事件 + touchmove 判断 + touchend 事件封装组成。


8、手机拍照和上传图片

1
2
3
4
5
     < input  type=”file”>的accept 属性
     <!-- 选择照片 -->
     < input  type = file  accept = "image/*" >
     <!-- 选择视频 -->
     < input  type = file  accept = "video/*" >


html5模板代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
<!DOCTYPE HTML>
< html >
< head >
     <!--申明当前页面的编码集-->
     < meta  http-equiv = "Content-Type"  content = "text/html; charset=utf-8" >
     <!--网页标题-->
     < title >HTML5移动端开发模板</ title >
     <!--网页关键词-->
     < meta  name = "keywords"  content = ""  />
     <!--网页描述-->
     < meta  name = "description"  content = ""  />
     <!--适配当前屏幕-->
     < meta  name = "viewport"  content = "width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"  />
     <!--禁止自动识别电话号码-->
     < meta  name = "format-detection"  content = "telephone=no"  />
     <!--禁止自动识别邮箱-->
     < meta  content = "email=no"  name = "format-detection"  />
     <!--iphone中safari私有meta标签,
         允许全屏模式浏览,隐藏浏览器导航栏-->
     < meta  name = "apple-mobile-web-app-capable"  content = "yes"  />
     <!--iphone中safari顶端的状态条的样式black(黑色)-->
     < meta  name = "apple-mobile-web-app-status-bar-style"  content = "black" >
     < style  type = "text/css" >
     /*reset 重置*/
     body,ul,ol,p,h1,h2,h3,h4,h5,dl,dd,form,input,textarea,
     td,th,button,strong,em,select,video,canvas{margin:0;padding:0;}
     li{list-style:none;vertical-align:top;}
     table{ border-collapse:collapse;}
     textarea{resize:none;overflow:auto;}
     img{ border:none; vertical-align:middle;}
     em{ font-style:normal;}
     a{ text-decoration:none;}
     a,input{
     -webkit-appearance: none;/*屏蔽阴影*/
     -webkit-tap-highlight-color:rgba(0,0,0,0);
     /*ios android去除自带阴影的样式*/
     }
     a, img {
     /* 禁止长按链接与图片弹出菜单 */
     -webkit-touch-callout: none; 
     
     }
     html, body {
     /* 禁止选中文本(如无文本选中需求,此为必选项) */
     -webkit-user-select: none;  
     user-select: none;
     }
     /*public*/
     html {
     font-size : 20px;
     }
     @media only screen and (min-width: 401px){
     html {
     font-size: 25px !important;
     }
     }
     @media only screen and (min-width: 428px){
     html {
     font-size: 26.75px !important;
     }
     }
     @media only screen and (min-width: 481px){
     html {
     font-size: 30px !important; 
     }
     }
     @media only screen and (min-width: 569px){
     html {
     font-size: 35px !important; 
     }
     }
     @media only screen and (min-width: 641px){
     html {
     font-size: 40px !important; 
     }
     }
     body{font-family: "Helvetica Neue", Helvetica, "STHeiTi", sans-serif; 
     overflow-x:hidden; overflow-y:auto; font-size:0.7rem;
     }
     .clear{zoom:1;}
     .clear:after{content:''; display:block; clear:both;}
     .fl{float:left;}
     .fr{float:right;}
     .viewport{ max-width:640px; margin:0 auto; overflow-x:hidden;}
     </ style >
</ head >
< body >
     < div >
         < div >这是一个移动端开发模板哟!</ div >
     </ div >
</ body >
</ html >

    再次觉得一个人苦逼的研究太累了,没有方向,可能会浪费大量的时间在做研究和测试上,但是也有一些乐趣在里面!对于学习和成长不失为一个很好的办法。

    同时也感谢昨天“辉”这位朋友,对于我博客文章的打赏。这应该是建博客以来:第二位朋友对于我博客文章的打赏了,从最初的建博客开始,我一天也没想到自己写的文章会得到相对应的回报!这可能就是“非以其无私邪,故能成其私”的道理吧!

写在最后:之前很多朋友都在问我:做网站怎么去盈利(赚钱),我告诉他们:要有一个“利他”之心。无私的帮他他人,不求回报,钱这个东西都是顺带的!这就是“道”需要去时间和经历去感悟。---以上纯属“段亮”个人见解,不喜勿喷!如有不足之处,欢迎指出。共勉!!

本文由段亮博客原创出品，如需转载请注明出处。

本文出处：http://www.duanliang920.com/learn/web/html5/321.html


yzbben
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
这个项目收集移动端开发所需要的一些资源与小技巧
08-10
这个项目收集移动端开发所需要的一些资源与小技巧
移动端开发注意事项
weixin_44756423的博客
03-18 133
1、跨平台性 所谓跨平台是指我们的接口要能够支持不同的终端，比如android、ios、windowsphone以及桌面软件、网站等，一套接口，支持多端。 当然从本质上讲，服务器端的接口跟终端是没有太大关系的，只是接口应该考虑到不同端的接入成本，采用通用的解决方案，比如通信协议就采用最常用的HTTP协议，如果是即时通信，可以采用开放的XMPP协议，做游戏的可以采用可靠的TCP协议，除非TCP不够用...
移动端开发的注意事项
dongjiekui1757的博客
03-17 134
　　在互联网营销的时代下，大部分企业除了自己的官网之外，也有建设手机网站，在移动用户比PC端用户多的情况下，企业又该如何去优化手机网站呢？其实手机网站建设都有一系列的注意事项，那么手机网站建设过程中注意事项都包含什么呢？下面让我们一起来看看吧！ 首先我们先说一下pc端和移动端的不同。 一：PC考虑的是浏览器的兼容性，而移动端开发考虑的更多的是手机兼容性，因为目前不管是an...
总结移动端页面开发时需要注意的一些问题
dengqiu9793的博客
01-21 282
1、防止手机中网页放大和缩小，这点是最基本的，最为手机网站开发者来说应该都知道的，就是设置meta中的viewport 有些手机网站我们看到如下声明： <!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd"&g...
web移动端开发技巧与注意事项汇总
qq_36584352的博客
06-22 3584
一、meta的使用 1、&lt;meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/&gt; 强制让文档的宽度与设备的宽度保持1:1，并且文档最大的宽度比例是1.0，且不允许用户点击屏幕放大浏览 2...
手机网站的几点注意
繁华过后你还有我
10-19 740
对于手机网站建设，总结了如下几点注意： 1、 安卓浏览器看背景图片，有些设备会模糊。 用同等比例的图片在PC机上很清楚，但是手机上很模糊，原因是什么呢？ 经过研究，是devicePixelRatio作怪，因为手机分辨率太小，如果按照分辨率来显示网页，这样字会非常小，所以苹果当初就把iPhone 4的960640分辨率，在网页里只显示了480320，这样devicePixelRat
移动端开发需要注意的20个要点
weixin_44023012的博客
03-18 869
移动端开发注意要点1、webkit内核私有标签2、HTML5标签的使用3、放弃CSS float属性4、利用CSS3边框背景属性5、块级化a标签6、自适应布局模式7、学会使用webkit-box8、如何去除Android平台中对邮箱地址的识别9、如何去除iOS和Android中的输入URL的控件条10、如何禁止用户旋转设备11、如何检测用户是通过主屏启动你的webapp12、如何关闭iOS中键盘自...
手机/移动前端开发需要注意的20个要点
08-31
本文主要介绍了手机/移动前端开发需要注意的20个要点，具有很好的参考价值。下面跟着小编一起来看下吧
移动端开发视频
07-22
资源名称：移动端开发视频资源目录：移动端实战系列视频教程移动前端开发视频下载学习视频软件必看 资源太大，传百度网盘了，链接在附件中，有需要的同学自取。
ecology 移动端流程自行开发指南.docx
09-24
自定义开发相关说明；流程相关变量获取；字段获取方式；事件绑定；提交时自定义check事件；Ajax获取数据 等
vue框架移动端开发入门指南
10-30
vue框架移动端开发入门指南vue框架移动端开发入门指南
移动端流程自行开发指南.docx
05-20
本文档将介绍泛微oa移动端的流程开发操作，代码注释等。
移动端开发需要注意的事项？
weixin_42437043的博客
07-29 485
移动端开发需要注意的事项？ 前提——移动端开发需要达到的三点要求： 1、自适应手机端任何尺寸设备 2、多平台ui表现一致 3、完美适配不同设备浏览器 一、meta的使用 移动端的项目必须配置viewport 二、布局 PC端和移动端的布局的思路还是比较不同的。在PC端我们很常见的一种布局思路如下：将网页主题设为固定宽度，居中，并定义最小宽度，可适配各种大小的PC端屏幕。由于PC端可视范围较大，所...
移动平台3G手机网站前端开发布局技巧汇总
weixin_30783913的博客
02-09 220
您或许正在或准备参与一个WepApp项目，您或许正在Google搜索mobile development相关的文章，您或许是一名专业的WEB前端工程师，您或许想学习Mobile前端开发方面的技术，如果您被我说中了，呵呵那么这篇文章将为您带来意想不到的惊喜！当您看到这篇文章时，哥已经默认认为您是一名资深的WEB前端工程师，如果您不是，可能您会遇见许多不理解或听不懂的专业术语或前端技术（包括WEB、M...
移动端开发需要注意的事项
cc果冻LXY的博客
03-16 622
最基本的是布局和适配 一般布局都会用flex布局 适配用单位rem 1、防止手机中网页放大和缩小，这点是最基本的，在设置meta中的viewport 使用viewport使页面禁止缩放。 通常把user-scalable设置为0来关闭用户对页面视图缩放的行为。 &lt;meta name="viewport" content="width=device-width, initial-sc...
移动端开发前端需要注意什么
最新发布
07-27
移动端开发前端需要注意以下几点： 1. 理想视口：为了在移动端有最理想的浏览和阅读宽度，需要设置理想视口。理想视口的宽度应该与设备的宽度一致，可以通过添加meta视口标签来实现。\[1\] 2. 布局方式：在移动端...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值