WIXOO

Digest

如何为移动设备创建网站

作者:四眼天兔工作室 发布时间 11/03/29 来源 四眼天兔工作室

一、如何执行CSS

  1. 针对旧款移动设备:
    <link rel="stylesheet" href="site.css" media="screen" />
    <link rel="stylesheet" href="mobile.css" media="handheld" />
  2. 针对新型移动设备:
    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设计注意事项

  1. 将页面设计为单栏
  2. 将没用的内容设置为“display: none”
  3. 减少空白边(padding和margin)的数值,以求页面的紧凑度
  4. 移除较大的背景图片,特别是作为整个网站的背景图片
  5. 将没用的文章内容图片设置为“display: none”
  6. 如果网站使用图片作为按钮或者导航,将其设置为文字形式
  7. 如果需要强制浏览器使用替代文字(alt-attributes)来显示图片,可以使用如下语句(注意,需要同时使用JavaScript为所有img标签添加“as-text”class值):
    img.as-text { content: attr(alt); }
  8. 对于过小的字体要增大其字号以方便阅读
  9. 对于一些重要按钮的可点击区域,一定要设置成“display: block”,并且为可点击的区域添加空白边值(padding)
  10. 移除不必要的浮动设置(float)
  11. 将“:hover“属性修改成“:active”,因为大多数移动设备并不识别“:hover“属性

三、除了CSS以外的设计技巧

  1. 可点击的电话号码
    <a class="phone-link" href="tel:15032084566">(503) 208-4566</a>

    其中“tel:15032084566”中的1是国家区号。

  2. 特殊的输入方式:HTML5的input格式
    <input type="tel" />
    <input type="email" />

    iphone-number.jpeg

    对于诸如iPhone这样的移动设备来说,“input type”可以自动弹出对应的输入键盘。比如

    <input type="tel" />

    可以弹出数字键盘,

    <input type="email" />

    可以弹出带有@和.符号的键盘

  3. 可视尺寸和方向判定
    可视尺寸:
    <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的几点说明

  1. 不要使用flash
  2. iPhone不支持
    <input type="“file”" />
  3. iPhone仅支持小于25kb的缓存
  4. 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。

  5. 针对iPhone/iPad的增强应用:1) 多种针对iPhone界面特效的Javascript库:Sencha Touch, jQTouch和iui,以上也适用于Android系统2) 创建特殊的iPhone ICON:其中png的图片尺寸为57X57像素