创新路
我们一直在努力

移动端开发的一些小技巧

媒体查询常用样式表:

<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css">    // 竖放加载
<link rel="stylesheet" media="all and (orientation:landscape)"href="landscape.css">   // 横放加载

//竖屏时使用的样式
<style media="all and (orientation:portrait)" type="text/css">
    #landscape { display: none; }
</style>

//横屏时使用的样式
<style media="all and (orientation:landscape)" type="text/css">
    #portrait { display: none; }
</style>

meta标签,这些meta标签在开发webapp时起到非常重要的作用

<meta content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0" 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标签表示:

1、强制让文档的宽度与设备的宽度保持1:1

2、并且文档最大的宽度比例是1.0,且不允许用户点击屏幕放大浏览;

3、 尤其要注意的是content里多个属性的设置一定要用分号+空格来隔开,

4、如果不规范将不会起作用。

其中:

  • width – viewport的宽度

  • height – viewport的高度

  • initial-scale – 初始的缩放比例

  • minimum-scale – 允许用户缩放到的最小比例

  • maximum-scale – 允许用户缩放到的最大比例

  • user-scalable – 用户是否可以手动缩放

第二个meta标签表示:

1、iphone设备中的safari私有meta标签,

2、允许全屏模式浏览

第三个meta标签表示:

1、也是iphone的私有标签,

2、它指定的iphone中safari顶端的状态条的样式;

第四个meta标签表示:

1、告诉设备忽略将页面中的数字识别为电话号码

2、在设置了initial-scale=1 之后,我们终于可以以1:1 的比例进行页面设计了。

 关于viewport:

1、还有一个很重要的概念是:iphone 的safari 浏览器完全没有滚动条,而且不是简单的“隐藏滚动条”, 是根本没有这个功能

2、iphone 的safari 浏览器实际上从一开始就完整显示了这个网页,然后用viewport 查看其中的一部分。 

3、当你用手指拖动时,其实拖的不是页面,而是viewport。

4、浏览器行为的改变不止是滚动条,交互事件也跟普通桌面不一样。

未经允许不得转载:天府数据港官方信息博客 » 移动端开发的一些小技巧

客官点个赞呗! (0)
分享到:

评论 抢沙发

评论前必须登录!

天府云博 - 做有态度的开发&运维&设计学习分享平台!

联系我们百度云主机