<p>中的文字在移动设备上缩小,而div则没有

ris*_*nst 11 browser xhtml mobile

有谁知道这里发生了什么?我在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>
Run Code Online (Sandbox Code Playgroud)

谢谢.

opa*_*ela 5

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

<!DOCTYPE html>
Run Code Online (Sandbox Code Playgroud)

然后调整视口,以便可以应用:

<meta name="viewport" content="width=device-width, initial-scale=1">
Run Code Online (Sandbox Code Playgroud)

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


小智 0

添加

<meta name="viewport" content="width=device-width, initial-scale=1">
Run Code Online (Sandbox Code Playgroud)

到您的页面。

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