6

我最近从css-tricks.com博客#38: Basics & Tips on Design for iPhone 上完成了 Chris Coyier 教程。不用说，我非常兴奋，并建议我做一些代码猴子工作，我们现在可以为他的客户提供 iPhone 网站。他说很酷，但其他移动设备呢？好问题。那么为 Android、Blackberry、WindowsMo​​bile 等设计网站的低谷是什么？人们是否在为其他平台而烦恼？谢谢。

4

1 回答 1

13

最近的 Webkit 和 Opera：

对于 iPhone Safari、Opera Mobile 和 Android 上的 Webkit 开发是相似的（但不完全相同），并且它们的开发非常简单。

您可以依赖 CSS2.1 和 JavaScript+DOM（但要小心UI 事件）。只需对样式表进行少量更改，您就可以为您的常规网站提供服务。

诀窍在于提供这些样式表。不要使用User-Agent字符串。

因为有些移动浏览器读取手持媒体，有些坚持屏幕样式并假装拥有 960 像素宽的屏幕 (iPhone :/)，所以您需要同时提供移动样式表：

<link media="handheld" ...>
<link media="screen and max-device-width:480px" ...>

后者是CSS3 媒体查询- 非常有用，也可以与其他移动浏览器一起使用（您可以在样式表中使用它@media {}）。

不要依赖:hover或onmouseover因为这些事件在触摸屏上不起作用。

onclick延迟了，mousemove可能无法正常工作。自定义 DHTML 小部件（下拉菜单、滑块）和拖放在触摸屏上不起作用，除非您使用触摸事件（谢天谢地，所有最新的浏览器都采用了）。

视口

除了 Apple 的专有（以及恕我直言，标记和布局之间的不灵活和违反分离）之外，<meta name=viewport>请查看CSS3 @viewport，它目前在最新的 Opera 中得到支持，@-o-viewport希望其他人也能效仿。

模拟器/模拟器

要在 Opera Mobile 中测试页面，请获取模拟器（或只是较旧的桌面版本并选择查看 → 小屏幕）。

Opera Mini 很特别，因为 CSS 被重新格式化了一点，DHTML 在服务器端执行，这并不总是能提供您期望的结果。有模拟器可用。

安卓

你需要 Android SDK，使用命令行来启动其笨重的 UI，下载一堆包，创建具有许多不相关的模糊设置的虚拟设备，耐心等待这个怪物加载并将计算机的粉丝变成四轴飞行器，然后你就可以 sss。 “浏览器”中的 .sss..slooowlyyyy 测试（我的英特尔 i5 太慢，无法模拟 Galaxy Tab - 浏览器“停止响应”，甚至在我完成输入 URL 之前）

更容易获得带有 Android 的手机/平板电脑并在真实设备上进行测试（但避免使用三星的播放器“iPod”等价物，因为它与过时的软件相去甚远）。

对于不喜欢 Linux 做事方式的人来说，Android 浏览器真的很痛苦——只是为了阅读 JS 控制台，你需要摆弄远程调试连接和命令行上的日志过滤。

Firefox Mobile（以前的 Fennec）

有模拟器可用（移动下载下方的“Windows / Mac OS X / Linux”链接不是桌面版本，而是mobile-for-desktop-OS）。

模拟器非常基础，Mobile Firefox 本身非常好，恕我直言，例如overflow:scroll效果很好，而基于 WebKit 的浏览器溢出实现在非常不直观和完全损坏之间变化。

袖珍IE：

Windows Mobile < 7 的 PIE 与 Windows 上的 IE 不同。它与 IE4 一样原始且有缺陷，但（几乎不）支持一些令人惊讶的高级属性，例如display:table.

它同时读取样式表handheld和screen样式表，这违反了标准并自取其辱。如果您要支持 PIE，则将指向handheld样式表的链接放在最后并反转/覆盖其中的屏幕样式中的所有规则。

反正已经死了，很难搞到模拟器。

Windows Phone 7 目前带有类似 IE7 的版本，微软后来承诺提供 IE9 级别的东西。

新（少数）黑莓

最新的基于 WebKit 的 BlackBerry 浏览器相当不错，您可以将其视为一等公民（参见顶部链接的 WebKits 比较）。

目前最流行的BlackBerry & OpenWave、Blazer等：

在 BB OS6 之前，这是一场噩梦。只有基本的 HTML 有效。CSS 适用于某些模型，但原始且损坏。JavaScript 仅适用于某些模型，而且速度非常慢且缺乏（甚至忘记基本的 DHTML）。

RIM 提供免费的 BB 模拟器（需要烦人的注册）。如果你不走运，它会正确启动一次，然后你必须完全重新安装它:)

低端手机上的数百个其他移动浏览器也是如此（由具有不错模拟器的 OpenWave 等提供支持）。您必须为他们准备 1 列的基本 HTML 精简网站。

谷歌无线转码器

即使您为每个移动设备创建了漂亮的 (X)HTML，Google 移动搜索的用户也永远不会看到它！取而代之的是，每个页面都将通过“无线转码器”进行代理，它残酷地切断代码，剥离所有样式表和脚本（无论浏览器是否支持它们），甚至<font>:(

于 2008-12-09T14:01:57.070 回答