在 iPhone 上查看 div 时如何更改其宽度？答案

【问题标题】：How do I change the width of a div when it is viewed on iPhone?在 iPhone 上查看 div 时如何更改其宽度？
【发布时间】：2013-05-28 16:27:01
【问题描述】：

我想要做的是使帖子和页面顶部的选择加入框的 div 延伸。我想使用 CSS 中的 width:100% 属性来实现，但它只是在中途拉伸。

所以我手动将宽度设置为像素数，使其达到 100%。但问题在于它会导致 iPhone/iPad 出现显示问题。

有没有办法在 iPhone/iPad 上改变 div 的宽度以适应缩放？我怎么能这样做？

谢谢！

丽兹

代码---

.page-opt {
margin-left:-314px;
width:1583px;
clear: both;
margin-bottom:-20px;
padding-bottom:-20px;
position: relative;
}

/* Non-Retina */
@media screen and (-webkit-max-device-pixel-ratio: 1) {
margin:0;
}

/* Retina */
@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (-o-min-device-pixel-ratio: 3/2),
only screen and (min--moz-device-pixel-ratio: 1.5),
only screen and (min-device-pixel-ratio: 1.5) {
margin:0;
}

/* iPhone Portrait */
@media screen and (max-device-width: 480px) and (orientation:portrait) {
margin:0;
} 

/* iPhone Landscape */
@media screen and (max-device-width: 480px) and (orientation:landscape) {
margin:0;
}

/* iPad Portrait */
@media screen and (min-device-width: 481px) and (orientation:portrait) {
margin:0;
}

/* iPad Landscape */
@media screen and (min-device-width: 481px) and (orientation:landscape) {
margin:0;
}

【问题讨论】：

标签： iphone ipad html width

【解决方案1】：

查看有关视口的部分：

https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariHTMLRef/Articles/MetaTags.html

您可以使用“设备宽度”。

【讨论】：

您是否将添加到您的 html 文件中？
我之前确实添加了 - 让我再试一次并测试。 :)
好的，只是做了...没用。是否可以在该 div 的实际 CSS 中设置初始缩放比例？
您需要在 html 中使用该视口，然后在您的 div 中使用 device-width 来指定大小
感谢您迄今为止的帮助，savner！当您说使用设备宽度时，您的意思是我应该指出我放在该列表中的每个设备下的 div 的宽度吗？所以应该说，width=100%（例如）？

【解决方案2】：

试试

#youroptinid { max-width: 1600px; width: 100%; clear: both; }

如果这不起作用，请发布您的 html 和 css 代码，以便我们为您提供帮助。没有代码我们只能推测。

【讨论】：