确保您的网站在移动浏览器上看起来正确的提示？

Question

我今天制作了一些网站，但自从移动浏览器出现问题以来我的网站在移动游戏等浏览器中看起来一直没问题，我没有改变我的编程习惯以适应，而我不确定要改变什么来修复我得到的错误。例如：

http://generationsbeyond.com/immersa/

在桌面浏览器中查看时，它是一个华丽的微型网站，但在移动浏览器中查看时，某些元素，特别是宽度为100％的元素会出现偏差。

示例：

http://imgur.com/WsrhM,1e1tH#0

似乎一切都是错的，我知道我的css习惯可能会有一些东西可能在将来阻止这种情况。

任何提示？

Answer 1

是的，使用两个样式表。在HTML中链接到它们时，请使用链接标记中的media =“...”属性来指定每个设备的用途。因此，一个人将拥有media =“掌上电脑”而另一个将拥有media =“screen”。调整掌上电脑的CSS文件直到它看起来不错。

因此，当PC用户访问您的网站时，将加载与media =“screen”相关的CSS文件，但如果手持设备用户进入，则将使用另一个。请注意，某些手持设备上的Safari浏览器会将自己标识为常规浏览器而非手持设备。希望这会有所帮助。

Answer 2

在网格系统中使用一些css表可能会有所帮助。 可悲的是，我不认为你可以让你的网站更“设备友好”，而不是几乎完全重写你的应用程序：/。

无论如何，一些推荐：
  - http://twitter.github.com/bootstrap/响应式css可以满足您的需求   - http://cssgrid.net/也许实施这一点不那么激进