css - Wordpress 不遵守移动设备上的 css 规则

标签 css wordpress mobile

我犹豫要不要说 wordpress 中有一个错误,但这让我很困惑。当我在 chrome 中将以下内容作为 html 文件查看时,它工作得很好。当我尝试在 wordpress 中执行此操作时,我在不同的移动设备上遇到了各种各样的问题。本质上,左右 id 不占用分配的宽度。我停用了除添加 css 代码之外的所有插件,并进行了健康检查,但都没有对问题产生任何洞察力。这是代码:

<!DOCTYPE html>
<html>
<head>
  <style>
  #container{
   display:flex;
   justify-content:start;
   width:100vw;
   font-size:3vw;
}

#left{
   width:35vw;
   border:solid black 1px;
   border-shadow:border-box;
}

#right{
   width:65vw;
   border:solid black 1px;
   border-shadow:border-box;
   text-align:center;
}
   </style>
</head>
<body>
  <div id="container">
     <div id="left">mobile</div>
     <div id="right"> different devices have problems</div>
  </div>
</body>
</html>

我需要帮助的页面:https://www.sustainablewestonma.org/test-2/

最佳答案

在您的网站上,有一个 html, body 的 CSS 规则,其中包含 min-width: 490px

这会导致您的 body 在小型设备上比屏幕宽(即或多或少的任何纵向智能手机)。 right/left 规则适用,但它们的百分比是根据 body 宽度 490px 计算的。

关于css - Wordpress 不遵守移动设备上的 css 规则,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58828442/

相关文章:

css - 完整日历默认 View

php - 在 wordpress 中更改 CSS

html - Bootstrap 布局在智能手机上太宽

ios - SSL 不适用于移动网站

html - 背景悬停颜色开箱即用

javascript - 带孔的模态背景

wordpress - 在单个 WP 查询中合并两个帖子类型

css - 使用来自另一个元素的选择器定位一个元素

html - 缺少属性的子菜单对齐

flutter - 什么是 MaterialStateProperty<OutlinedBorder>