IPHONE IOS的前端开发笔记(序言)

现在不停的盛传着新的移动平台的应用模式,即APP+WEB得组合。之前经历了android平台的应用端开发,这次着手进行着IPHONE的开发应用。

在移动平台上的开发最主要的问题在于设备的性能和对机器的适配,相比android平台掺杂不齐的硬件标准来说,IOS平台相对好一些。每一代虽然在硬件上不同(多半是性能的差异),但是在WEB端的表现还是相对统一的。

第一开发IOS平台难免遇到一些问题,最突出的主要集中在屏幕的适配上。

当时拿到第一个设计稿的时候发现设计稿的规格为宽度640像素,起初以为它和android平台一样,做好自适应即可,可谁知道页面在默认分辨率下居然是320像素。

最初我的头部申明如下:

设计稿的规格为640像素,在页面表现的时候明显偏大了。无法按UI稿进行排版,如下图:

我尝试了使用程序去侦测一下页面的规格,使用JS的clientWith进行输出,代码如下:
alert(document.documentElement.clientWidth);

在中设置content=”width=device-width;”默认情况下为:

后来我咨询了一下公司的IPHONE应用端的同事,问一下IPHONE4(下面简称I4)在默认分辨率下是多少规格(因为之前与UED和产品沟通绝大部分人认定IPHONE4是640像素),I4的同事告诉一般为320像素,最高可达到640像素的规格(因为应用端和WEB端是两个技术,后面谈话我们基本是鸡同鸭讲,此处省略)。

最终问题没有被肯定因为I4同事说APP是可以按640像素做的,但是我想知道的是在APP嵌入页面后无论应用端使用的分辨率是多少,被嵌入的页面在使用 device-width 属性时,分辨率是多少!估计最终结论可能要等待客户端提供测试程序后才能进行。

这里我在解释一下标签里面的属性和值。

name=”viewport” 该属性指示浏览器使用设备的宽度来作 viewport (视图)的宽度,保证页面的显示在用户可视范围内比例。

我们做一下面的测试。在meta中我们强制让页面按980的规格来进行现实,在不加“viewport”的情况下显示如下:

当我们加了“viewport”后显示效果如下:

content中的我们可以分别使用一下属性对页面进行申明,分别为:

width:一般情况我们使用device-width来申明现实的规格按系统当前的规格来实现。也可以手动输入数值,如:320,640,980这样。

initial-scale:初始的缩放比例,如果你把initial-scale=1,那么width和height在竖屏时自动为320*356(不是320*480因为地址栏等都占据空间),横屏时自动为480*208。类似地,如果你仅仅设置了width,就会自动推算出initial-scale以及height。例如你设置了width=320,竖屏时initial-scale就是1,横屏时则变成1.5了。在设置了initial-scale=1之后,我们终于可以以1:1的比例进行页面设计了。

user-scalable: 用户是否可以手动缩放。一般我是建议不允许用户手动缩放,因为缩放后我们对页面进行太多复杂的处理,最终导致页面变得臃肿而得不偿失(学习乔布斯封闭式思想,哈哈)

一般我们只需要进行几个属性的申明即可。

暂时先写到这里了。



发表评论?

0 条评论。

发表评论


注意 - 你可以用以下 HTML tags and attributes:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

无觅相关文章插件,快速提升流量