css – 停止调整移动设备中的文本大小

2023年9月5日 202次阅读

伙计们,

所以我试图从我的网站(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部分中停止了调整大小的文本,但现在正常大小的文本只占用了通常空间的一半(在左侧)……

任何帮助将不胜感激.谢谢.

最佳答案 看看这个链接：
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 */
}
点赞