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

  • 编辑时间: 2015-08-23
  • 浏览量: loading
  • 作者: 段亮

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

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

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


一、关于单位的使用

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

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

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

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

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

代码如下:

    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。

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自动识别邮箱

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


 2、使用无衬线字体

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

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

    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、禁止选择文本

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


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

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


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

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

6、屏蔽阴影:

    -webkit-appearance:none;

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


7、单击延迟

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

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


8、手机拍照和上传图片

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


html5模板代码

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

如果您觉得文章对你有帮助,可以进行打赏。
打赏多少,您高兴就行,谢谢您对段亮这小子的支持! ~(@^_^@)~

微信扫一扫 微信打赏

支付宝扫一扫 支付宝打赏

评论列表(网友评论仅供网友表达个人看法,并不表明本站同意其观点或证实其描述)
  • 段亮自媒体博客
    2015-09-05 10:11:10发表

    百度编辑器自带的

  • 子涵
    2015-09-04 23:26:34发表

    学长 你这个显示代码的东东,你用的是那个插件哟?

  • 快速约会
    2015-09-01 10:12:58发表

    移动端越来越火了

你也想建立一个独立博客?

你是否也想打造一个在互联网上的个人品牌,成为一个家喻户晓的人物呢?
请点击了解 怎样创建个人博客