如何修复我的网站以使其在移动设备上运行？

Question

我试图让我的网站在手持设备上调整大小，但由于某种原因它没有响应样式表。 如果你看这里：responsive design link 并把 www.sofiamillares.com 作为站点测试，顶行被切断，一切看起来都超级大。

有人能告诉我为什么会这样吗？最简单的解决方法是什么？

Answer 1

发生这种情况是因为您的设计并不完全流畅。

只有你的container div 会调整宽度（一点点）

要快速解决此问题，您可以

1. 给您的divs 百分比宽度，以便它们随屏幕分辨率缩放

2. 将您的方形框浮动在底部，这样它们就会堆叠在较小的屏幕上

3. 考虑使用媒体查询或一些 js 设备检测来定位移动设备并向它们发送修改后的 css 样式表。

在这里获得一些想法：http://mediaqueri.es/

Answer 2

正如 Jason 所建议的，创建网站的移动特定版本通常是最佳解决方案。然后，您可以测试用户代理字符串中是否存在“android”和“iphone”等短语，并将用户重定向到您的移动网站。有可用于 JavaScript 的库以及许多服务器端编程环境（PHP、ASPX 等），它们可以为您进行各种浏览器检测。

在构建移动网站时，您当然希望页面轻量，以便通过移动数据连接快速加载，并为纵向的较小屏幕设置适当的格式。