HTML 流体（百分比宽度）无法正确缩放

Posted 2023-03-12

【中文标题】HTML 流体（百分比宽度）无法正确缩放

【英文标题】：HTML fluid (percentage widths) not scaling properly

【发布时间】：2012-09-24 18:06:30

【问题描述】：

我的 html 流畅网站无法在 iPhone 4/S/5 和 iPad 设备上正确缩放。我的最小容器 div 比例设置为 480px。我不明白为什么它不能正确缩放。可能在我的元数据中：initial-scale=1.0？

jsfiddle 在这里：http://jsfiddle.net/CtPpg/2/

【问题讨论】：

也许它可以帮助您解决问题***.com/questions/7152474/…

“未正确缩放”是什么意思？怎么了？

【参考方案1】：

您是否正在为您的最小宽度设置 px 宽度？如果我错了，请纠正我，但它应该是一个百分比值，以使其真正流动。

【参考方案2】：

ipad 的最大设备宽度为 1024，而 iphone 的最大设备宽度为 480 像素。您可能需要使用媒体查询来处理这两个设备。

ipad：@media only screen and (min-device-width: 768px) and (max-device-width: 1024px)

iphone：@media only screen and (max-device-width: 480px)

看看这个jsfiddle

变化：

 max-width: 480px; 
 /*max-width: 800px;  #### set your max width here #### */

【讨论】：

我的流体宽度不应该解决这个问题吗？我还希望这可以在桌面浏览器上查看，因此 480 的最小值并不是很好。感谢您的帮助

我已经建立了一个博客 silence-uncovered.blogspot.com ，我在为台式机、移动设备等编写 HTML 电子邮件时所学到的一切，对于网站来说应该没有太大的不同。基本上，你需要阅读/实验一堆:) ...祝你好运！你能不能接受我的回答，帮我加分。

要使其在台式机上也能正常工作，您可能需要width='100%' min-width='480px'