zoukankan      html  css  js  c++  java
  • 手机web页面制作时的注意事项

    一、手机页面的标准头规范

    字符编码使用utf-8:指定页面手机内存缓存中的存储时间段

    device-width:通知浏览器使用设备的宽度作为可视区的宽度

    initial-scale - 初始的缩放比例

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

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

    --------解决原先在Pocket PC 2002上能够全萤幕显示的Flash影片(240×320),到了Pocket PC2003之后,自动会缩小的问题。


    二、手机页面的css样式

    1.页面自带css建议style标签头标准化,格式:id="internalStyle">

    2 .部分手机浏览器对如下css样式支持不是很好,建议慎重使用:

    · 不支持font-family属性,也就是说,在很多浏览器可能只有一种默认字体;

    · 不支持font-szie属性,如在UC浏览器你只能看到一样大小的字体;

    · 不支持width、height、padding、margin、line-height属性,如,在UC浏览器只能通过p、br 等HTML标签来换行以达到字符上下间隔;

    · 不支持固定像素的宽度,100%显示页面,如:在UC浏览器始终将看到的是“满屏的”;

    · 不支持浮动、层叠布局,float和position属性无效,如:在UC浏览器你只能看到“左对齐”,建议使用table格局。

    · 支持background-color,但不支持background-image,也就是说不支持CSS背景图显示,在UC浏览器你只 能看到背景色,为了手机的流量,提倡尽量少用背景图。

    · max-device-width这样的选项,限定屏幕宽度小于480的设备才采用该样式表。

    三、其他

    1.网页大小限制:建议低版本页面不超过15k,高版本页面不超过60k。

    2.部分手机不支持png8和png24,所以尽量使用jpg和gif的图片;

    3.另外对于平滑的渐变等精细的图片细节,部分手机的色彩支持度并不能达到要求,所以慎用有平滑渐变的bar设计;

    4.部分手机对于超大图片,既不进行缩放也不显示横下滚动条;

    5.少数手机在打开超过20k的测试页面时,会显示内存不足

    6.大部分手机不支持表单元素的“disable”属性,部分手机不支持的"button"标签,“input【type=file】"标签,"iframe"标签。少数手机不支持”select“标签。

    7.在手持设备上,按钮最好不要直接用img标签

    四、浏览器使用情况:

    CNNIC与CR-Nielsen联合发布的《2009年中国移动互联网与3G用户调查报告》显示,

    手机自带浏览器市场份额高达49.6%,

    在现有手机浏览器品牌中,

    腾讯手机浏览器份额27.3%,

    UC手机浏览器份额11.2%,

    Opera手机浏览器份额1.8%,

    其他手机浏览器份额2.4%。

    尽管今年 UC浏览器扳回一城,重新超越了QQ浏览器,但不排除有随时被对方超越的可能。

    五、手机页面制作心得:

     1.手机页面的宽度最好控制在240px以内,因为这样可以在不移动屏幕的情况下进行一系列的操作。

    2.无论是普通的手机或者智能机,似乎都不太支持js。类似<a href="javascript:history.back()">和"alert()"都不支持。

    3.手机对“<input type="button">”的样式支持不是太好,同样的代码在浏览器上和手机上有一定的宽度差距,在给定宽度的情况下。所以我的建议是能不用按 钮,就不用按钮,可以用文字的超链接形式代替, 或者也可以考虑使用小图标。

    4.列表页面最好用table不要用ul li,或者p+空格,一方面是排版,一方面是如果某一列的元素过长,可以使用“table tr td{word-break:break-all;}”,而另外两种方案只能截取字符串了。

    5.大图片的存在还是有一定的必要,比如说像导航图,会给人一种炫丽的感觉,但是图片也不能过大,一定要控制在10K以内。

  • 相关阅读:
    QOMO Linux 4.0 正式版发布
    LinkChecker 8.1 发布,网页链接检查
    pgBadger 2.1 发布,PG 日志分析
    Aletheia 0.1.1 发布,HTTP 调试工具
    Teiid 8.2 Beta1 发布,数据虚拟化系统
    zLogFabric 2.2 发布,集中式日志存储系统
    开源电子工作套件 Arduino Start Kit 登场
    Piwik 1.9 发布,网站访问统计系统
    Ruby 1.9.3p286 发布,安全修复版本
    toBraille 1.1.2 发布,Java 盲文库
  • 原文地址:https://www.cnblogs.com/summers/p/3328214.html
Copyright © 2011-2022 走看看