<p> 内的文本在移动设备上会缩小，而 div 不会答案

【问题标题】：Text inside <p> shrinks on mobile devices while div does not<p> 内的文本在移动设备上会缩小，而 div 不会
【发布时间】：2013-06-26 19:49:47
【问题描述】：

有人知道这里发生了什么吗？我在opera、dolphin 和工厂的android 浏览器上进行了测试。（虽然它现在似乎正在开发歌剧）

div 不会改变大小，但文本会以某种方式缩小以适合 div 的一部分。无论如何要防止这种情况发生？

为了清楚起见，我试图在移动浏览器上实现与 PC 版本相同的外观。

问题似乎出在浏览器上，如何强制文本占据 div 的全宽？我尝试将 p 标签设置为 100%，但没有成功。

div 必须具有该宽度并与页面左侧对齐。

*更新 1：我在 Galaxy s4 上尝试了以下代码（之前在 s2 上尝试过），但在歌剧 mini 和 dolphin 上遇到了同样的错误。错误可以使用opera mini simulator在线可视化，您只需要将html文件托管在某个地方。

*更新 2：我认为问题的存在是因为网页加载时，它是以正常大小（像素）加载的，所以段落只占页面的一小部分。然后，页面缩小，所有内容都适合页面，但文本没有展开，它停留在最初的小空间中。

在 PC 上，应该是这样的：

我尽可能地缩小了代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en-us">
<head>

<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />

<meta content="" name="keywords" />
<meta content="" name="description" />

<title></title>

</head>
<body>
<div style="width:1000px; margin-left:auto; margin-right:auto;" >

<div style="float:left; width:758px; background-color:aqua;">
<p>

Random text Random text Random text Random text Random text Random text Random text Random text 
Random text Random text Random text Random text Random text Random text Random text Random text 
Random text Random text Random text Random text Random text Random text Random text Random text  
Random text Random text Random text Random text Random text Random text Random text Random text  
Random text Random text Random text Random text Random text Random text Random text Random text  
Random text Random text Random text Random text Random text Random text Random text Random text  
Random text Random text .
<br />
<br />
Random text Random text Random text Random text Random text Random text Random text Random text  
Random text Random text Random text .
<br />
<br />
Random text Random text Random text Random text  
<a href="http://www.a.com/a.html">
Random text </a> Random text  
Random text .
</p>
</div>
</div>
</body>
</html>

谢谢。

【问题讨论】：

以上代码在 Safari Mobile 和 Android 浏览器上运行良好。
@MattCoughlin 谢谢马特。我应该说我在 android 上尝试过该代码。
在 iPad2 和 Android 2.3 股票浏览器（摩托罗拉 Droid2 Global）上试过，没有问题。您使用的是哪些浏览器？他们没有安装一些异国情调的插件吗？
@ern0 没有插件。股票机器人，海豚，迷你歌剧。它确实适用于歌剧和铬。尝试缩小以确保它有效。

标签： mobile browser xhtml

【解决方案1】：

最好开始应用 HTML5 和正确的文档类型：

<!DOCTYPE html>

然后调整视口，这样就可以应用了：

<meta name="viewport" content="width=device-width, initial-scale=1">

我没有要测试的 Opera Mini，但根据兼容性表，它应该可以工作。

【讨论】：

链接在我的问题上，只需点击“opera mini”。感谢您的回答，但它似乎没有工作。

【解决方案2】：

添加

<meta name="viewport" content="width=device-width, initial-scale=1">

到你的页面。

这是一个关于视口元标记的好读物：http://webdesign.tutsplus.com/tutorials/htmlcss-tutorials/quick-tip-dont-forget-the-viewport-meta-tag/

【讨论】：

我会对此进行更多研究。我试过了，它放大了内容所在的位置，所以最初我看不到空白，但底部有一个滚动条。简单地缩小，我可以看到 div 的空白部分仍然存在。这对我来说是个问题，我在那个 div 之后有内容。

【解决方案3】：

这可能是Webkit中的文本缩放尝试添加css：

{ -webkit-text-size-adjust: 100%; }

或

{ -webkit-text-size-adjust: 无； }

【讨论】：

【解决方案4】：

移动网络浏览器会自动缩放页面，以便用户可以更清楚地看到文本。如果要防止文本缩放，在<head>中添加这段代码：

<meta name="viewport" content="width=device-width, initial-scale=1">

【讨论】：

【解决方案5】：

我在 Droid Razr (Droid OS 4.1.2) - 股票浏览器上遇到了与此几乎相同的问题。原来是浏览器本身的问题 - 设置损坏或其他东西。 转到设置 > 高级 > 重置为默认值 > 确定 解决了问题。

【讨论】：

这里没有发生什么，但你是对的，在歌剧中，有一个名为“包装文本”的选项，当更改为不更改结果时，在海豚上它被称为“自动调整内容”。所以这确实证实了浏览器的问题，我怎样才能确保内容被传递到 100% 的页面？

【解决方案6】：

我在使用的时候发现

text-align: center;

一切正常，但是当我使用时

text-align: left;

文本被缩小（Android 4.1 浏览器）

需要进一步研究...

【讨论】：

【解决方案7】：

尝试以相对单位（如 %）指定宽度。

在这里：

宽度：100%；对于第一个 div 和..

宽度：75%；对于里面的div

【讨论】：

适用于 opera、stock android 和 chrome，但不适用于 dolphin