关注前端开发
关注用户体验

移动端Web开发小记

之前为公司商旅频道写移动端的页面时遇到不少问题,今特来个总结,希望能为后来者带来一些帮助。

不再考虑浏览器兼容性

移动端开发主要对象是手持设备,其中绝大部分是IOS和Android系统,so,在开发此类页面时不必纠结IE和其他一些2B浏览器的兼容性,webkit是本次开发重点。

当然,不同版本的Android是存在一些问题的,还有就是不同浏览器的版本也存在一些差别,IOS在这方面表现甚好。

所以在开发时我们只需使用Chrome进行调试即可,话说Chrome的开发者工具也是灰常不错的。

丰富的页面Meta

控制显示区域各种属性:

<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
  • width                      – viewport的宽度
  • height                     – viewport的高度
  • initial-scale          – 初始的缩放比例
  • minimum-scale  – 允许用户缩放到的最小比例
  • maximum-scale – 允许用户缩放到的最大比例
  • user-scalable       – 用户是否可以手动缩放

IOS中Safari允许全屏浏览:

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

IOS中Safari顶端状态条样式:

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

忽略将数字变为电话号码:

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

一般情况下,IOS和Android系统都会默认某长度内的数字为电话号码,即使不加也是会默认显示为电话的,so,取消这个很有必要!

IOS中Safari设置保存到桌面图标:

这是IOS中Safari特有的meta,是在你保存某个页面到桌面的时候使用这张图作为桌面图标,so,尺寸和iphone上的一致,是57*57px

<link rel="apple-touch-icon" href="custom_icon.png">

强大的CSS属性box-flex

之所以将这块作为大栏目来讲,是因为这个属性非常有用,和之前开发win8 app时的grid非常相似。

box-flex的作用是按百分比划分兄弟相同标签的width,也就是当ul里有个两个li时,每个li会自动划分ul的宽度,如果box-flex:1;那么此时,li的width就是50%

box-flex用法实例1:

<ul>
     <li>11111</li>
     <li>2222222</li>
     <li>333333333</li>
</ul>
ul{display: -webkit-box;}
ul li{-webkit-box-flex: 1;}

显示结果(需用webkit核浏览器查看,如Chrome,下同):

点此查看实例展示

box-flex用法实例2:

<div class="demo02">
	<input placeholder="百分百宽度输入框" type="text">
</div>
<style type="text/css">
.demo02{display: -webkit-box;}
.demo02 input{-webkit-box-flex: 1;width: 100%;padding:4px;height:18px;line-height:18px;border-style: solid;border-width: 1px;border-color: #ddd #ccc #ccc #ddd;}
</style>

点此查看实例展示

CSS3实用图标搜集

其他技巧

关闭Input键盘默认首字母大写:autocapitalize=”off”

赞(3)
未经允许不得转载:大前端 » 移动端Web开发小记
分享到: 更多 (0)

评论 29

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
  1. #20

    I truly wanted to write a brief note so as to say thanks to you for the stunning secrets you are sharing here. My extensive internet investigation has at the end of the day been paid with pleasant suggestions to share with my friends and family. I would repeat that we readers actually are unequivocally blessed to live in a very good network with many brilliant individuals with very helpful techniques. I feel somewhat grateful to have encountered your entire webpages and look forward to some more pleasurable minutes reading here. Thank you once more for everything.

  2. #19

    I am incessantly thought about this, thanks for putting up.

  3. #18

    Woh I like your posts , saved to fav! .

    Byron Czarniecki1个月前 (03-11)回复
  4. #17

    CSS3实用图标,具体如何使用没看明白!

    Frances4年前 (2015-06-05)回复
  5. #16

    这都可以,看用户名

    习近平4年前 (2015-05-13)回复
  6. #15

    不错呀 谢谢分享

    qianrenzhang4年前 (2015-02-10)回复
  7. #14

    区分了PC端,这些基础的东西很有用,现在想学习移动端建站,有什么好资料站分享。

    西班牙移民4年前 (2014-12-09)回复
  8. #13

    正在学习移动前端,很有帮助

    web前端6年前 (2013-07-01)回复
  9. #12

    现在网上关于手机网站前端开发的资料貌似很少

    web前端6年前 (2013-06-18)回复
  10. #11

    不错,还有帮助。

    青岛网络推广6年前 (2013-03-09)回复
  11. #10

    木有图片

    wordpress教程网6年前 (2013-01-16)回复
  12. #9

    发现安卓2.3.4自带浏览器不能显示中文粗体,butEnglishisok
    发现安卓2.3.4自带浏览器不能显示中文粗体,butEnglishisok

    hei7年前 (2012-11-15)回复
  13. #8

    NB, 对wap 开发很有用。

    moto727年前 (2012-10-29)回复
  14. #7

    大前端这个名字真心霸气

    大發7年前 (2012-08-29)回复
  15. #6

    图片都挂了啊!

    所谓刚子7年前 (2012-08-27)回复
  16. #5

    谢谢分享~

    azhun7年前 (2012-08-18)回复
  17. #4

    最近也在弄这个,建议加上一条:
    由于不同版本的Android 的内置浏览器内核版本不一样,因此webkit 的点击效果可能不同,有的版本的android 点击后会出现篮框等效果,因此可以加上:
    * {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    }

    来消除

    lingyired7年前 (2012-08-10)回复
  18. #3

    我换上你的d7之后用iphone浏览效果极好,比我之前用插件还清爽啊

    5不出来7年前 (2012-08-08)回复
  19. #2

    移动手机应用呀,好高深的东西哟。

    翠龙茶庄7年前 (2012-08-08)回复
  20. #1

    很不错的web开发小记

    邢台妇科医院7年前 (2012-08-07)回复

themebetter 国内更好的WordPress主题服务商

立即前往