如何为移动设备创建网站
一、如何执行CSS
- 针对旧款移动设备:
<link rel="stylesheet" href="site.css" media="screen" />
<link rel="stylesheet" href="mobile.css" media="handheld" />
- 针对新型移动设备:
Step1: 创建一个名为core.css的文件,内容为:
@import url("screen.css");
@import url("antiscreen.css") handheld;
@import url("antiscreen.css") only screen and (max-device-width:480px);
Step2:
@import url("antiscreen.css") only screen and (max-device-width:480px);
二、移动页面CSS设计注意事项
- 将页面设计为单栏
- 将没用的内容设置为“display: none”
- 减少空白边(padding和margin)的数值,以求页面的紧凑度
- 移除较大的背景图片,特别是作为整个网站的背景图片
- 将没用的文章内容图片设置为“display: none”
- 如果网站使用图片作为按钮或者导航,将其设置为文字形式
- 如果需要强制浏览器使用替代文字(alt-attributes)来显示图片,可以使用如下语句(注意,需要同时使用JavaScript为所有img标签添加“as-text”class值):
img.as-text { content: attr(alt); }
- 对于过小的字体要增大其字号以方便阅读
- 对于一些重要按钮的可点击区域,一定要设置成“display: block”,并且为可点击的区域添加空白边值(padding)
- 移除不必要的浮动设置(float)
- 将“:hover“属性修改成“:active”,因为大多数移动设备并不识别“:hover“属性
三、除了CSS以外的设计技巧
- 可点击的电话号码
<a class="phone-link" href="tel:15032084566">(503) 208-4566</a>
其中“tel:15032084566”中的1是国家区号。
- 特殊的输入方式:HTML5的input格式
<input type="tel" />
<input type="email" />
对于诸如iPhone这样的移动设备来说,“input type”可以自动弹出对应的输入键盘。比如
<input type="tel" />
可以弹出数字键盘,
<input type="email" />
可以弹出带有@和.符号的键盘
- 可视尺寸和方向判定
可视尺寸:
<input type="email" />
(宽度为320px,可以等比例变换)
<input type="email" />
(宽度为320px,不可以等比例变换)
方向判定:
@import url("portrait.css") all and (orientation:portrait);
@import url("portrait.css") all and (orientation:portrait);
当然,并非所有的移动设备都能识别以上操作方式,因此还可以使用max-width属性。
四、针对iPhone和iPad的几点说明
- 不要使用flash
- iPhone不支持
<input type="“file”" />
- iPhone仅支持小于25kb的缓存
- iPhone不能完好的支持“@font-face”属性,而对SVG文件格式有很好的支持,因此CSS需要写成日如下的形式:
@font-face {
font-family: 'Comfortaa Regular';
src: url('Comfortaa.eot');
src: local('Comfortaa Regular'),
local('Comfortaa'),
url('Comfortaa.ttf') format('truetype'),
url('Comfortaa.svg#font') format('svg');
}
其中.otf用来支持Firefox和Safari,EOT用来支持IE。
- 针对iPhone/iPad的增强应用:1) 多种针对iPhone界面特效的Javascript库:Sencha Touch, jQTouch和iui,以上也适用于Android系统2) 创建特殊的iPhone ICON:其中png的图片尺寸为57X57像素