在移动设备上查看固定页面布局答案

【问题标题】：Viewing fixed page layout on mobile devices在移动设备上查看固定页面布局
【发布时间】：2015-08-22 10:11:13
【问题描述】：

我正在使用我网站的固定页面布局 (http://www.oatmeeel.com)。它适用于桌面浏览器，但不适用于移动设备。该网站已缩放以适应浏览器，但某些组件的格式发生了变化。请帮忙？谢谢！

【问题讨论】：

“一品脱容不下一夸脱”——玛格丽特·德兰——浮现在脑海中。需要根据设备修改布局
感谢您如此深刻的报价。但我希望布局完全相同，只是最小化以适应较小的屏幕，一切看起来都与桌面相同。
您不能 - 屏幕太小。这就是公司投资为移动设备创建网站的原因。

【解决方案1】：

将所有固定宽度的容器转换为百分比。无论如何，您希望您的网站适合屏幕。所以，而不是使用

width: 1442.88px;

您正在使用的。将此转换为 100%。此外，为网站创建百分比布局（流体布局）。如果需要，您可能还需要使用“媒体查询”来重新排列元素。

寻找这两个词：

百分比布局（流体布局） & 媒体查询 。

您将着手解决您面临的问题。如果您想了解任何细节，请告诉我。

【讨论】：

【解决方案2】：

以下是我从零开始的大多数响应式网页设计项目中使用的草稿：

<html>
<head>
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;">
<style>
body { margin: 0; padding: 0; }
@media (min-width: 728px) and (max-width: 1150px) {
/* enter large tablet style overrides here */
}
@media (min-width: 420px) and (max-width: 727px) {
/* enter medium tablet and large phone style overrides here */
}
@media (min-width: 1px) and (max-width: 419px) {
/* enter small devices and phone style overrides here */
</style>
</head>

<body>
Website body here
</body>

</html>

中的行使您的响应式页面在移动设备上看起来很正常。没有它，您的网站在移动设备上看起来会被缩小，并且文字难以阅读。

【讨论】：