为移动设备设计 Web 界面答案

【问题标题】：designing web interfaces for mobile devices为移动设备设计 Web 界面
【发布时间】：2014-11-19 23:13:09
【问题描述】：

您如何使您的网站在标准浏览器和各种可用的移动设备上看起来都很好？

目前我在尝试使我的布局可调整大小以使其适用于小型设备或为移动设备提供单独的 CSS 之间犹豫不决。我的用例是一个国际象棋游戏，我希望整个棋盘都可用而无需向下滚动。

你会推荐什么？

【问题讨论】：

【解决方案1】：

基本上没有简单的方法可以做到这一点，您可以在大多数现代手机上使用 CSS 来控制输出，但您需要在图像显示在手机上之前调整其大小，因为所有手机的屏幕尺寸都不同。

【讨论】：

【解决方案2】：

在这种特殊情况下，为了获得最佳观看效果，可能值得专门针对移动设备。

【讨论】：

【解决方案3】：

我会推荐 CSS 方法。否则，我担心你的界面只会在两者中看起来都足够，而且只是平庸。

您不希望您的网站看起来像是受到一种或另一种受众的影响。

【讨论】：

【解决方案4】：

我不知道您是否意识到您要问的问题有多大——“各种移动设备”？有很多设备、很多分辨率以及很多错误和限制，从可以处理普通浏览器可以处理的任何内容的 iPhone 到很小的黑白屏幕。

理论上，您可以针对手持设备编写单独的 CSS

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

但就个人而言，如果您尝试支持大量设备，我认为检测设备并尝试为其提供可以处理的代码是唯一真正的解决方案。

您可以通过获取WURLF 来查看问题的严重程度，这是一个 13MB 的 XML 文件，其中包含有关不同设备及其功能的详细信息。

【讨论】：

【解决方案5】：

尝试使用 Google 的新 Mobile friendly test 工具来评估您的网站 1

【讨论】：