停止在移动设备上调整文字大小

Question

大家好，

我正在尝试消除我的网站（boxangeles.com）在移动浏览器中自动调整文本大小的问题，因为它会让版面看起来很糟糕。

似乎出现问题的部分是引用了以下 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;}

我在StackOverflow上发现了这个代码：<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=0">，它可以防止在#newpost部分调整文本大小，但现在正常大小的文本只占据了通常空间的一半（在左边）。如果您能提供帮助，将不胜感激。谢谢。

- Mike Box Elder

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

- Ben Leitner