• 有关手机Wap 2.0网站制作的细节


    这里说明一下,是针对普通手机开发 Wap 2.0的网站的制作。相比3G智能手机简单多了,只是一些注意标签和css属性的使用,避开一些不支持的样式。

    一、文档的属性的设置

     1.<?xml version="1.0" encoding="utf-8"?>

     xml 的声明并不是必要的,但如果忽略在许多WAP浏览器中出错。听说会影响某些 wap 浏览器,比如 Sony Ericsson 的一些型号,“ 当接收到的 MIME 类型为 text/html 时, 会利用 XML 声明来区分 XHTML MP 和 IHTML(一个 NTT DoCoMo 定义的有专利的标记语言)文档;如果文档包含 XML 声明,它就是一个 XHTML MP 文档,否则它就是一个 IHTML 文档。”

    2.<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd"> [/task] 定义 DTD 的名字,声明了使用 XHTML Mobile 1.0 为内容格式。 [task] 3.<meta http-equiv="Cache-Control" content="must-revalidate,no-cache" />

     设置浏览器缓存,这里是禁止缓存, must-revalidate 是针对某些浏览球通过返回按钮回到上一个标签而不重新装载。

    4.<meta http-equiv="Content-Type" content="application/vnd.wap.xhtml+xml;charset=utf-8" />

    由OMA 定义的 XHTML MP 内容的首选 MIME 类型为:‘application/vnd.wap.xhtml+xml’ 。这一类型可以用于向 XHTML 用户代理提供 XHTML MP 文档支持。另外,也可使用 ‘application/xhtml+xml’ 。在一些 Symbian Series 60 浏览器上,必须使用 MIME 类型 ‘application/vnd.wap.xhtml+xml’ 以确保正确的 XHTML MP 内容视图。

     再点击专题上面的连接就能跳到手机站的网页

    5.<meta name="viewport" content="width=device-width;initial-scale=1.0;maximum-scale=2.0;user-scalable=1" />

     针对 iphone 的设置。(其中http://websqq.org/archives/211已经有详细的介绍)

    最后是 W3C 提供移动网页使用的 XHTML 验证工具,它会对你做的页面提出建议和不符合标准的地方。

    二、XHTML部分

    大多数手机不支持的: 表单元素的“disable”属性 部分手机不支持的: “button”标签 “input[type=file]“标签 “iframe”标签。 虽然只有部分手机不支持这几个标签,但因为这些标签在页面中往往具有非常重要的功能,所以属于高危标签,要谨慎使用。 少数手机不支持的: • “select”标签:该标签如果被赋予比较复杂的CSS属性,可能会导致显示不正常,比如”vertical-align:middle”。

    三、CSS部分

    并不是所有手机都支持CSS的,有的支持link的嵌入,比较多的支持直接写在页面里,还有一点非常重要,就是CSS里面一定都要是小写,大写不起作用对某些手机。 大部分手机不支持的: • “font-family”属性:因为手机基本上只安装了宋体这一种中文字体;

    • “font-family:bold;”:对中文字符无效,但一般对英文字符是有效的;

    • “font-style: italic;”:同上;

    • “font-size”属性:比如12px的中文和14px的中文看起来一样大,当字符大小为18px的时候你也许能看出来一些区别;

    • “white-space/word-wrap”属性:无法设置强制换行,所以当你网页有很多中文的时候,需要特别关注不要让过多连写的英文字符撑开页面; • “background-position”属性:但背景图片的其他属性设定是支持的;

    • “position”属性;

    • “overflow”属性;

    • “display”属性;

    • “min-height”和”min-weidth”属性; 部分手机不支持的:

    • “height”属性:对”height”的支持不太好,奇怪的是在我们的测试当中,仅仅只有很少部分手机不支持”width”属性;

    • “pading”属性 • “margin”属性:更高比例的手机不支持”margin”的负值。 少数手机不支持的:

    • 少数手机对CSS完全不支持;

    四、JavaScript部分

    这部分测试相对不那么让人抓狂,要么干脆不支持,如果支持的话,对基本的dom操作、事件等支持度都还不错。 在测试过的手机当中,支持(包括不完全支持)JavaScript的手机比例大约在一半左右,当然,对于我们来说,最重要的不是这个比例,而是要如何做好JavaScript的优雅降级。

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

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

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

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

    另外开发中还有一些需要注意的问题详见http://websqq.org/archives/291

  • 相关阅读:
    react结合antd4.0和umi3.0的404界面
    小程序自带组件自定义tabbar
    移动安全学习清单
    跨域资源共享 CORS 详解(转)
    docker常用命令总结
    XSS绕过小结
    mysql的order by注入
    本地文件包含漏洞利用姿势
    XSS绕过<>进行测试
    clamscan+clam-freshclam.service服务启停
  • 原文地址:https://www.cnblogs.com/asqq/p/3194990.html
Copyright © 2020-2023  润新知