设计移动设备的Web界面

Question

How do you make your website look good in both a standard browser and on the various mobile devices available?

Currently I am undecided between trying to make my layout resizable so that it will work for small devices, or providing a separate CSS for mobile devices. My use case is a chess game where I want the entire board to be available without scrolling down.

What would you recommend?

Answer 1

在这种特殊情况下，听起来似乎是最佳观看方式，可能值得专门针对移动设备。

Answer 2

I would recommend the CSS approach. Otherwise, I fear you'll have an interface that will only look adequate in both and only mediocre at that.

You don't want your site to look like it's compromised for one audience or the other.

Answer 3

I don't know if you realise how big a question you're asking -- "the various mobile devices"? That's a lot of devices, a lot of resolutions and a lot of bugs and limitations, all the way from iPhones, which can handle anything a normal browser can handle, to tiny little black-and-white screens.

In theory, you can write separate CSS to target hand-held devices

<LINK REL="stylesheet" TYPE="text/css" MEDIA="handheld" HREF="handheld.css">

but personally, if you're trying to support a large number of devices I think detecting the device and trying to feed it code it can handle is the only real solution.

You can start looking at how big the problem is by getting WURLF which is a 13MB XML file of details about the different devices and their capabilities.

Answer 4

basically there is no easy way to do this, you can use CSS on most modern phones to control the output but you need to resize the images before they are displayed on the phone as all phones have different screen sizes.

The best site I have come across dealing within mobile design is : http://patterns.littlespringsdesign.com/index.php/Main_Page

Answer 5

尝试使用Google全新的“ 移动友好”测试工具来评估您的网站1