网站为iPhone - 但对于其他平台？ [英] Websites for the iPhone - but what about other platforms?
问题描述
最近我从 css-tricks.com 博客的＃38：基础知识和放大器;对设计为iPhone 提示。不用说，我非常兴奋，并建议一个家伙，我做了一些code猴子工作，我们现在可以提供iPhone的网站，他的客户。他说很酷，但对于其他移动设备？好问题。那么，什么是低下来的设计网站为Android，黑莓，WindowsMobile的，等等？是人与其他平台的困扰？谢谢你。
I recently did the Chris Coyier tutorial from the css-tricks.com weblog #38: Basics & Tips on Designing for the iPhone. Needless to say I got very excited and suggested to a guy that I do some code monkey work for that we could now offer iPhone websites to his clients. He said cool, but what about other mobile devices? good question. So what is the low down on designing websites for Android, Blackberry, WindowsMobile, etc? Are people bothering with the other platforms? Thanks.
推荐答案
有关iPhone Safari浏览器，Opera移动，并在Android开发的Webkit是相似的（的但不完全相同），以及开发这些是很简单的。
Recent Webkit and Opera:
For iPhone Safari, Opera Mobile, and Webkit on Android development are similar (but not identical), and development for those is quite simple.
您可以依靠CSS2.1和JavaScript + DOM（但要小心 UI事件）。你可能会逃脱与刚刚样式一些变化提供您的正规网站。
You can rely on CSS2.1 and JavaScript+DOM (but be careful with UI events). You might get away with serving your regular website with just few changes to stylesheets.
关键是在这些样式的服务。 不要使用用户代理字符串。
The trick is in serving of these stylesheets. Don't use User-Agent string.
由于一些手机浏览器阅读手持媒体，有的坚持在屏幕上的风格和pretend有960像素，宽屏幕（iPhone：/），你需要服务的移动样式既：
Because some mobile browsers read handheld media, and some insist on screen styles and pretend to have 960px-wide screen (iPhone :/), you'll need to serve mobile stylesheet with both:
<link media="handheld" ...>
<link media="screen and max-device-width:480px" ...>
后者是 CSS3媒体查询 - 非常有用的，与其他移动浏览器的工作原理太（你可以在样式表中使用 @media使用{} ）。
The latter is CSS3 Media Query – very useful and works with other mobile browsers too (you can use it in stylesheets with @media {}).
不要依赖：悬停或的onmouseover ，因为这些事件不会对触摸屏的工作。
Don't rely on :hover or onmouseover because these events don't work on touch screens.
的onclick 被延迟，鼠标移动可能无法正常工作。自定义DHTML小部件（下拉菜单，滑块）以及拖放将无法在触摸屏的工作，除非你使用的触摸事件（其中谢天谢地所有的最新浏览器采纳）。
onclick is delayed, mousemove may not work. Custom DHTML widgets (dropdowns, sliders) and drag'n'drop won't work on touchscreens, unless you use touch events (which thankfully all newest browsers adopted).
在除了苹果专有的（标记和布局之间恕我直言不灵活，违反分离）<$ C $ C>＆LT; META NAME =视＆GT; 看看的 CSS3 @viewport ，目前在最新的Opera支持作为 @ - 邻视，并希望其他人也会跟进。
In addition to Apple's proprietary (and IMHO inflexible and violating separation between markup and layout) <meta name=viewport> have a look at CSS3 @viewport, which currently is supported in latest Opera as @-o-viewport and hopefully others will follow.
要在Opera移动测试页面，获取模拟器（或只是旧的桌面版本和选择查看→小屏幕）。
To test page in Opera Mobile, get the simulator (or just older desktop version and choose View → Small Screen).
Opera Mini的是特殊的，因为CSS被重新格式化了一下，DHTML是在服务器端，这并不总是给你所期望的结果执行。有模拟器提供。
Opera Mini is special, as CSS is re-formatted a bit and DHTML is executed on server-side, which doesn't always give results you'd expect. There's simulator available.
您必须使用Android SDK，拨弄命令行推出其笨重的用户界面，包下载一堆，创建一个不相干的晦涩设置十几个虚拟设备，有耐心为这个怪物来加载，然后打开电脑的风扇成四轴飞行器，然后你可以在浏览器sss..sss..slooowlyyyy测试（我的英特尔酷睿i5是模拟的Galaxy Tab太慢 - 浏览器停止响应甚至在我完成键入URL）
You need Android SDK, fiddle with commandline to launch its clunky UI, download bunch of packages, create virtual device with dozen of irrelevant obscure settings, have patience for this monster to load and turn computer's fans into a quadcopter, and then you can sss..sss..slooowlyyyy test in the "Browser" (my Intel i5 is too slow to simulate Galaxy Tab - browser "stops responding" even before I finish typing URL)
这是比较容易得到一个真正的设备上的电话/与Android平板电脑和测试（但要避免三星的播放器iPod的等价物，因为它是垃圾，使用过时的软件）。
It's easier to get a phone/tablet with Android and test on a real device (but avoid Samsung's Player "iPod" equivalent, as it's rubbish with obsolete software).
Android浏览器是任何人谁不爱做事Linux的方法真的很痛苦 - 只是看JS控制台，您需要使用远程调试连接，拨弄和命令行日志过滤
Android browser is really painful for anyone who doesn't love Linux way of doing things — just to read JS console you need to fiddle with remote debug connections and log filtering on commandline.
有的模拟器可（对于在Windows / Mac OS X的链接/ Linux的的手机下载不是桌面版本，但移动换桌面OS）。
There's simulator available (links for "Windows / Mac OS X / Linux" below mobile downloads are not the desktop version, but mobile-for-desktop-OS).
模拟器是非常基本的，移动设备Firefox本身就是恕我直言真的很不错，例如溢出：滚动的伟大工程，而在基于WebKit的浏览器溢出实现之间变化非常直观，完全破
Simulator is very basic, Mobile Firefox itself is IMHO really good, e.g. overflow:scroll works great, while on WebKit-based browsers overflow implementation varies between very unintuitive and totally broken.
PIE的Windows Mobile＆LT;图7是不相同的发动机作为IE于Windows。这主要是因为原始的越野车作为IE4了，不过（勉强）支持像一些令人惊讶的高级属性显示：表
PIE for Windows Mobile < 7 is not the same engine as IE on Windows. It's mostly as primitive and buggy as IE4 was, but (barely) supports some surprisingly advanced properties like display:table.
它读取手持和屏幕样式表的同时，违反标准，并在拍摄脚本身。如果你要suppot PIE，然后把链接手持去年样式和反向/覆盖从画面风格所有的规则在里面。
It reads both handheld and screen stylesheets at the same time, violating the standard and shooting itself in the foot. If you're going to suppot PIE, then put link to handheld stylesheet last and reverse/override all the rules from screen styles in it.
无论如何，它已经死了，这是很难得到的仿真器。
Anyway, it's dead and it's hard to get an emulator.
的Windows Phone 7目前包括IE7-一致好评，并承诺微软IE9级以后的事。
Windows Phone 7 currently ships with IE7-alike, and Microsoft promised something of IE9 level later.
最新的基于WebKit的浏览器的黑莓手机是相当不错的，你可以把它当作第1级的公民（见WebKits比较顶部的链接）。
The latest WebKit-based BlackBerry browser is quite good, you can treat it as 1st-class citizen (see WebKits comparison linked at the top).
对BB OS6之前，这是一个噩梦。只有基本的HTML工作。 CSS作品在某些机型上，而是原始的破碎。 JavaScript的只适用于某些型号，它的的难以置信的缓慢和缺乏（忘了即使是最基本的DHTML）。
Before the BB OS6, it's a nightmare. Only basic HTML works. CSS works on some models, but is primitive and broken. JavaScript works only on some models and it's incredibly slow and lacking (forget about even basic DHTML).
有可用空闲BB模拟器从RIM（需要烦人注册）。如果你运气不好，它会推出适当的一次的，然后你必须完全重新安装吧：）
There's free BB simulator available from RIM (annoying registration required). If you're unlucky, it'll launch properly once and then you'll have to completely reinstall it :)
同样的事情是对低端手机的其他数百个移动浏览器（搭载奥维，它具有的体面的模拟器）。你必须prepare 1列的基本剥离下来的网站为他们的HTML。
The same thing is with hundreds of other mobile browsers on low-end phones (powered by likes of OpenWave, which has decent simulator) . You'll have to prepare 1-column basic HTML stripped down website for them.
即使你创建漂亮的（X）HTML为每个移动设备优化的摆在那里，谷歌移动搜索的用户将不会看到它！
相反，每一页都将通过无线跨codeR的残酷砍下code，剥离所有的样式和脚本（浏览器无论支持与否），甚至＆LT被代理;字体＆GT; ：（
Even if you create nifty (X)HTML optimized for every mobile device out there, users of Google Mobile Search will never see it!
Instead, every page will be proxied through "Wireless Transcoder" which brutally chops the code, stripping all stylesheets and scripts (regardless whether browser supports them or not), and even <font> :(
这篇关于网站为iPhone - 但对于其他平台？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
