Question

民间，

所以我试图从我的网站（boxangeles.com）中删除移动浏览器中的自动文本大小调整，因为它使布局看起来很糟糕，IMO。

似乎有问题的部分引用了这个CSS -

#newPost {
background-color: white; 
border: 1px solid #ec0000;
border-radius: 7px;
font-size: 20px;
line-height: 115%;
margin-bottom: 15px;
padding: 15px;
width: 690px;
margin: 0px 15px 15px 0px;}

#newPost img {
border: 1px solid #ec0000;
margin-left: auto;
margin-right: auto;}

#newPost a:hover {
text-decoration: underline;}

工作正常的文本部分正在使用此CSS -

.post-block {
background-color: white;
border: 1px solid #ec0000;
border-radius: 7px;
font-size: 20px;
float: left;
height: 165px;
line-height: 115%;
margin: 0px 15px 15px 0px;
padding: 10px;
width: 700px;}

p.post-block a:hover {
text-decoration: underline;}

.post-block a:hover {
text-decoration: underline;}

.post-block .thumb {
background: url(images/thumbBg.jpg) no-repeat;
float: left;
height: 150px;
padding: 4px;
margin: 2px 7px 2px 2px;
width: 150px;}

我发现了这个 -

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=0">

在StackOverflow上的

，它在#newpost部分中停止了调整大小的文本，但现在正常大小的文本只占用了通常空间的一半（在左侧）......

非常感谢任何帮助。感谢。

Answer 1

请看一下这个链接：https://css-tricks.com/snippets/css/media-queries-for-standard-devices/

您应该使用媒体查询，以便根据屏幕大小分配不同的CSS代码。这是一个基本设置：

/* Put your original CSS code here */

@media(min-device-width: 320px) and (max-device-width: 480px) {
    /* Put your mobile only code here */
}

停止调整移动中的文本大小

1 个答案: