LixiPHP – 致力于PHP高级编程!

在iPhone、Smartphone 上设计网页和设计打印样式表(print stylesheet)非常相似。页面是竖排版的，所有内容均按行显示。

HTML头信息

<meta charset="utf-8" />
<link rel="shortcut icon" href="favicon.ico" type="image/vnd.microsoft.icon" />
<meta name="Generator" content="LIXIPHP (http://lixiphp.com)" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="MobileOptimized" content="width">
<meta name="HandheldFriendly" content="true">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta http-equiv="cleartype" content="on">
<meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">

分别定义：

1、编码Unicode UTF-8

2、浏览器图标地址和类型

3、Generator 生产者

4、网页缩放比例为1:1

5、控制手机布局，width默认为屏幕大小，也可以为具体数字如240、480，Windows Mobile推荐设置为240

6、控制手机放大缩小网页显示

7、控制全屏显示(Apple Safar)

8、ClearType主要是针对LCD液晶显示器设计，可提高文字的清晰度。

9、兼容性

导入CSS样式

<link rel=”stylesheet” type=”text/css” href=”style.css” />

和普通网页一样的方式。

CSS样式表

页面的显示和手机屏幕的分辨率息息相关，分别有以下几个标准：

/* iPhone Smartphone portrait one-col-stack */
@media only screen and (max-width:320px) {
CSS content…
}

/* iPhone Smartphone landscape one-col-vert */
@media only screen and (min-width:321px) and (max-width:480px) {
CSS content…
}

/* iPad Tablet portrait one-col-vert */
@media only screen and (min-width:481px) and (max-width:768px) {
CSS content…
}

/* iPad Tablet landscape three-col-right */
@media only screen and (min-width:769px) and (max-width:1024px) {
CSS content…
}

注意：

• 不要使用绝对宽度如width:960px; 可以用相对宽度代替如width:100%；
• 不要使用float元素浮动，手机中的内容都是按行显示的；

预览效果：

标签： CSS, html, iPad, iPhone, Smartphone, Tablet, 设计