移动网站如何获得与大多数设备的最大兼容性？
我为智能手机制作了单独的网站，现在需要为其他旧手机制作单独的网站。 如何在旧/小屏幕手机上获得移动网站与大多数设备的最大兼容性？
我正在考虑将此
文档类型用于 HTML
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Basic 1.1//EN"
"http://www.w3.org/TR/xhtml-basic/xhtml-basic11.dtd">
并且仅支持支持的选择器和属性 CSS Mobile Profile 2.0
- 图像不应过多使用，否 应使用透明图像
- 旧版本不支持Javascript 一些 CSS 2.1 选择器
- 不是 兼容旧浏览器
- 布局应该没有固定宽度 因为各种屏幕尺寸 最好
- 不要使用外部 CSS。 里面的 CSS 会很好
- HTML 5 doctype 将不受支持，所以我将使用 XHTML Basic 1.1
- 不应该有
width和float为任何元素定义的 - http 请求应该非常少
- 不应该定义
font-family
我不确定某些事情？
- 如果可能的话我应该使用 CSS 精灵吗？
- 我应该在中进行布局吗 相反，
- 内联 CSS 比外部 CSS 更好吗？ CSS？
- 我应该使用任何 css 重置代码吗 css的分层？
- 我应该使用 utf-8 还是 ISO？
- 是否可以使用表格 验证？
- 我应该不提供任何链接吗 打开一个新窗口？
- 是否有必要使用 em in px 的位置代表字体大小？
我的积分够好吗？
虽然我要阅读 http://www.w3.org/TR/mobile- bp/ 详细信息，我还检查了 http://html5boilerplate.com/mobile/ 但是它适合所有人，包括智能手机+，但有些东西很有用
手机屏幕分辨率，按品牌和型号排序 http://cartoonized.net/cellphone-screen-resolution.php
但是根据您的个人经历，您还建议考虑什么其他事情，有什么建议吗？
I made separate site for Smartphone and now Need to make separate site for other old mobiles.
How to get maximum compatibility with most of the devices of a Mobile Website on old/small screen mobiles?
I'm thinking to use
This doctype for HTML
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Basic 1.1//EN"
"http://www.w3.org/TR/xhtml-basic/xhtml-basic11.dtd">
AND only selectors and properties which are supported CSS Mobile Profile 2.0
- Images should not be used much and No
transparent images should be used - Javascript is not supported in old
mobiles - Some CSS 2.1 selector are not
compatible in old browsers - Layout should be without fixed width
because Various screen sizes are
there - It's good to not to use external CSS.
CSS inside would be good - HTML 5 doctype will not be supported so I will use XHTML Basic 1.1
- No
widthandfloatshould be
defined for any element - http requests should be very less
- No
font-familyshould be defined
I'm not sure on some things?
- Should I use CSS sprites if possible?
- Should I make the layout in
instead - Is inline CSS better than external
CSS? - Should I use any css reset code at
the strating of the css? - Should i use utf-8 or ISO?
- Is it possible to use form
validation? - Should i not give any link which
opens a new window? - Is it necessary good to use use em in
place of px for font-size?
Are my points good enough?
Although I'm going to read http://www.w3.org/TR/mobile-bp/ in details and I also checked http://html5boilerplate.com/mobile/ but it's for all including Smartphones+ but some things are useful
Smartphone Front-end Matrices
https://spreadsheets.google.com/spreadsheet/ccc?authkey=CJPSkfwO&pli=1&hl=en&key=tLen0XZBVTziVZBzwwQFxlw&hl=en&authkey=CJPSkfwO#gid=0
Cell Phone Screen Resolution, sorted by brand and model
http://cartoonized.net/cellphone-screen-resolution.php
But What other thing you will suggest to consider on you personal experience, Are there any tips?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
为什么你使用
??这是 xml 标头，而不是 html。关于问题：
您可以使用透明GIF，它们在一定程度上受到支持。然而，透明 Png 却不是。
这并不是不支持。首先，JS 在旧浏览器上总是默认禁用的。第二个问题是 JS 的错误实现。第三个因素是旧手机资源有限，而且由于 JS 是客户端，它可能会导致手机崩溃/变慢。
在移动设备上，建议始终使用流体布局（基于％）
内联 css 在旧设备上是最好的，因为它们中的大多数都存在请求过多或将样式应用于 dom 时的问题。请记住，他们使用 EDGE 或更糟糕的 WAP 连接，这些连接几乎与拨号一样糟糕。
您可以使用 XHTML basic 甚至更好，
宽度，始终处于 % 状态。漂浮，永远。直到 S60 3rd FP1 之前，Symbian 上的浮动还是有问题的。 （N73 在 S60 3rd 上运行，浮动有问题。在 N95 的 S60 3rd FP1 上，浮动在大多数用途中得到修复，但仍然偶尔出现错误，具体取决于使用情况）。这同样适用于绝对位置和固定位置。
尽可能减少。更多请求，蹩脚的 wap/edge 需要更多次去获取某些东西，以及更多的加载时间。
字体系列和尺寸是旧设备上最烦人的两件事。他们中的大多数都有自己的字体和大小。
例如：Motorola V3R/ RAZR V3 有自己的字体，只有一种大小（如果我没记错的话，每个字母大约是屏幕的 7~9px）。但是您可以声明 Arial，因为它是一种常见字体，并且当浏览器有它时就会使用它。
不惜一切代价避免。在减少请求数量的同时，您遇到了其他问题：您的布局将是流畅的，并且使用百分比时背景位置通常会混乱。老黑莓喜欢破坏背景图像。
在我看来，是的。由于连接和渲染都很慢，如果你的 css 文件由于某种原因超时，（已经很糟糕的）布局将会更糟。
我曾经使用 YUI 的代码，但在非常旧的浏览器（再次是 V3r 和近）上根本没有太大区别。但当您向客户展示时，这很好：P
确实取决于您的内容。如果您对所有 html 实体进行编码（例如，当使用拉丁字符时），请选择 UTF-8。如果您不编码，请尝试 ISO。但无论如何，旧的浏览器强制它自己的编码。检查N95的浏览器，例如，您可以设置自己的编码，从而弄乱html的编码。
尽可能避免使用 JS，始终使用服务器端。
旧浏览器没有“选项卡”支持，因此即使您指定为 target="_blank"，它也会在当前页面的顶部打开。
我不记得什么时候，但 S60 的浏览器确实支持选项卡，但这是一个隐藏的功能。例如，N95 S60 3rd FP1 webkit 浏览器不允许您在新窗口上打开链接，但如果使用 _blank，则会打开一个新标签。要循环浏览“选项卡”，您需要按“5”键。
当您有一个脚本来增加字体大小（那些 A-/A+ 图标）时，出于可访问性的原因，这很有好处。但正如我在不应定义字体系列问题中所说的那样。
一些提示：
= 大多数旧的黑莓浏览器都是垃圾，比 IE5-6 差得多。因此，例如，如果您想在主容器上有 5px 左/右边距，以便它可以显示为“居中”，请放弃 from margin:0 5px;并选择左边框：5px实体#same_bg_color;右边框：5px实体#same_bg_color;很遗憾，但这就是 RIM 所做的：/
= 始终尝试使布局尽可能最垂直。不要在同一行堆放太多东西。
= 始终将导航锚定在文本中间。旧设备的导航方式是从一个锚点跳转到另一个锚点（或者 S60+ 中的“伪鼠标”），因此如果您到达页面末尾，则必须多次按“向上”键。通过创建“转到顶部”来避免这种情况，或者更好的是，在页脚上创建相同的顶部菜单。
= 大部分时间不要弄乱字体。颜色、尺寸、家族在大多数情况下都不起作用。
= 所有这些提示都考虑了我个人设备等级中的“低端”和一些早期“中端”设备：
高端设备：运行以下操作系统的设备：iOS、Android、WP7+ 、Bada、bbOS 6.0+
中端设备：高端设备之前的设备。一些后来的Symbian S40系列和所有S60，最新的Sony/Ericsson的Walkman才开始使用Android。
低端设备：所有其他设备，考虑 WML、WAP1、BlackBerries、Windows Mobile（6.XX 或更早版本）、大多数 Symbian S40 及更早版本以及其他所有设备。
Why u using
<?xml version="1.0" encoding="UTF-8"?>?? This is a xml header,not html.About the questions:
You can use transparent GIF, they are somewhat supported. Transparent Png however, not.
It's not that is not supported. The first thing is that JS is always disabled by default on old browsers. The second problem is the buggy implementations of JS. The third factor is that old mobiles had limited resources, and since JS is client-side, it might crash/slowdown the phone.
On mobile, the tip is ALWAYS go with fluid layouts (% based)
Inline css is the best on old devices, since most of them have problems with too many requests or when applying the styles to the dom. Remember they use EDGE or even worse, WAP connections, that are almost as bad as dial-up.
You can use XHTML basic or even better,
<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.2//EN" "http://www.openmobilealliance.org/tech/DTD/xhtml-mobile12.dtd">Width, always on %. Float, never. Up until S60 3rd FP1, floats were buggy on Symbians. (N73 runs on S60 3rd and float is buggy. On N95' S60 3rd FP1, the float was fixed on most of the uses but still bug one time or another, depending of use). The same applies to position absolute and fixed.
Reduce when possible. More requests, more times the crappy wap/edge needs to go get something, and more time loading.
Family and size are two things that are annoying with old devices. Most of them got their own fonts and sizes.
For example: Motorola V3R/ RAZR V3 got it's own font, with only one size (each letter is around 7~9px of screen if i remind correctly). But you can declare Arial since it's a common font and will be used when the browser have it.
Avoid at all costs. While reduce the number of requests, you hit on other problem: Your layout will be fluid, and background-position normally messes up when using percentages. And old Blackberries loves to bug with background-image.
In my oppinion, yes. Since connection and rendering are both slow, if your css file timeout for whatever reason, the (already bad) layout will be worse.
I used to use YUI's one but on really old browsers (again V3r and near) simply does not make so much difference. But it's good when you are showing to clients :P
Really depends how your content is. If you encode all html entities (when using latin characters, for e.g.) go for UTF-8. If you don't encode, try ISO. But anyways, old browsers force it's own encoding. Check N95's browser for e.g., you can set your own encoding, thus messing with the html's one.
Avoid JS when possible, always go for server-side.
Old browsers have no 'tab' support, so even if you specify as target="_blank", it will open on top of your current page.
I don't remind when but S60's browsers do support tabs, but is kinda a hidden feature. For e.g., N95 S60 3rd FP1 webkit browser does not allow you to open link on new window, but will open a new tag if _blank is used. And to cicle through the 'tabs', you need to press '5' key.
It's good for accecibility reasons, when you have a script to increase font-size (those A-/A+ icons). But as i said on the No font-family should be defined question.
Some tips:
= Most old blackberry browsers are crap, much worse than IE5-6. So, for e.g. if you want to have 5px left/right margin on your main container so it can be shown as 'centered', give up from margin:0 5px; and go for border-left:5px solid #same_bg_color;border-right:5px solid #same_bg_color; Sad but it's what RIM made :/
= Always try your layout be the most vertical as possible. Don't stack too many stuff in the same line.
= ALWAYS make navigation anchors in middle of text. Old devices navigates jumping from anchor to anchor (or a 'pseudo-mouse' in S60+), so if you get to the end of the page, you gotta press 'Up' tons of times. Avoid it by creating 'Go to Top' or even better, create the same top menu on the footer.
= Don't mess with fonts on mostly of time. color, size, family will not work on mostly of times.
= All those tips consider the 'low' and some early 'mid' devices, of the following my personal device rank:
High-end devices: Devices running the following OS'es: iOS, Android, WP7+, Bada, bbOS 6.0+
Mid-end devices: Devices previous to the High-end ones. some later Symbian S40 series and all S60, latest Sony/Ericsson's Walkman before started using Android.
Low-end devices: All others, considering WML, WAP1, BlackBerries, Windows Mobile (6.XX or older), most of Symbian S40's and older, everything else.
如果您必须确保您的网站可以在所有设备上运行，您可能需要查看 WALL http ://wurfl.sourceforge.net/java/wall.php
If you have to make sure your site will work on all devices you might want to have a look at WALL http://wurfl.sourceforge.net/java/wall.php