11

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

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

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

由于问题似乎出在浏览器上,如何强制文本占据 div 的整个宽度?我尝试将 p 标签设置为 100%,但没有成功。

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

*更新1:我在galaxy s4上尝试了以下代码(之前在s2上尝试过),在opera mini和dolphin上也遇到了同样的错误。可以使用opera mini 模拟器在线查看错误,您只需在某处托管 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>

谢谢。

4

7 回答 7

4

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

<!DOCTYPE html>

然后调整视口,这样就可以应用了:

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

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

于 2013-07-29T09:02:42.463 回答
0

添加

<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/

于 2013-06-27T06:48:55.907 回答
0

我发现当我使用

text-align: center;

一切正常,但是当我使用

text-align: left; 

文本缩小(Android 4.1 浏览器)

需要多研究一点...

于 2014-02-23T10:48:07.857 回答
0

移动网络浏览器会自动缩放页面,以便用户可以更清楚地看到文本。如果要防止文本缩放,请将此代码添加到<head>

<meta name="viewport" content="width=device-width, initial-scale=1">
于 2013-07-29T11:42:58.103 回答
0

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

  • { -webkit-文本大小调整:100%;}

或者

  • { -webkit-文本大小调整:无;}
于 2013-07-29T10:16:01.960 回答
0

尝试以相对单位(如 %)指定宽度。

就像这里:

宽度:100%;对于第一个 div 和..

宽度:75%;对于里面的 div

于 2014-03-03T11:52:23.310 回答
0

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

于 2013-12-10T21:10:20.300 回答