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

移动端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”

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

评论 25

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

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

    Frances2年前 (2015-06-05)回复
  2. #16

    这都可以,看用户名

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

    不错呀 谢谢分享

    qianrenzhang2年前 (2015-02-10)回复
  4. #14

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

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

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

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

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

    web前端4年前 (2013-06-18)回复
  7. #11

    不错,还有帮助。

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

    木有图片

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

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

    hei4年前 (2012-11-15)回复
  10. #8

    NB, 对wap 开发很有用。

    moto724年前 (2012-10-29)回复
  11. #7

    大前端这个名字真心霸气

    大發4年前 (2012-08-29)回复
  12. #6

    图片都挂了啊!

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

    谢谢分享~

    azhun4年前 (2012-08-18)回复
  14. #4

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

    来消除

    lingyired5年前 (2012-08-10)回复
  15. #3

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

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

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

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

    很不错的web开发小记

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

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

立即前往