Javascript 手机/平板电脑上的响应站点、页眉和页脚宽度问题
我一直在一个修改过的wordpress网站上工作(修改了很多主题),遇到了一个css/响应相关的问题 当正文中有一个非常大的宽度项目,或者一个宽度超出正文的动态项目(宽度方面是动态的,如jQuery DataTable)时,站点页眉和页脚不会正确展开以占据正文的整个宽度 对于一个实时示例,请访问此链接(不过,您需要使用用户代理修改器或使用chrome emulator,例如,设置为iPad或iPhone) 图像示例: (注意页眉和页脚不会扩展到正文中“贴图”图像的宽度) --以下是指向上述页面的屏幕截图的链接,显示了确切的问题: i、 imgur.com/BUjzLAK.jpg jQuery数据表示例: (注意页眉和页脚如何不扩展到下面jquery数据表的宽度) --以下是指向上述页面的屏幕截图的链接,显示了确切的问题: i、 imgur.com/4nx2M5v.jpg 这两个例子,页眉和页脚的宽度比例适当,如果使用任何东西,而不是移动或平板电脑设备(或用户代理) 我意识到答案可能不是一个简单的解释,但谁能至少为我指出我应该寻求解决方案的大致方向Javascript 手机/平板电脑上的响应站点、页眉和页脚宽度问题,javascript,jquery,html,css,wordpress,Javascript,Jquery,Html,Css,Wordpress,我一直在一个修改过的wordpress网站上工作(修改了很多主题),遇到了一个css/响应相关的问题 当正文中有一个非常大的宽度项目,或者一个宽度超出正文的动态项目(宽度方面是动态的,如jQuery DataTable)时,站点页眉和页脚不会正确展开以占据正文的整个宽度 对于一个实时示例,请访问此链接(不过,您需要使用用户代理修改器或使用chrome emulator,例如,设置为iPad或iPhone) 图像示例: (注意页眉和页脚不会扩展到正文中“贴图”图像的宽度) --以下是指向上述页面
谢谢 与其使标题更宽,为什么不使图像更窄?移动用户无论如何都不必水平滚动 要使图像适合屏幕宽度,请在图像上使用以下CSS样式:
max-width: 100%;
height: auto;
我知道这只回答了你问题的一部分,但这肯定是我对这张图片所做的
另一方面,我注意到在
未来拍卖/styleau.css
第18行中,您有以下行:
*{box-sizing:border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box;}
带前缀的CSS规则应始终放在第一位,因此写这行的正确方法是:
*{-webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box;}
感谢您的回复,不过之前我将图像设置为最大宽度:100%,但这会使其中一些图像看起来太扭曲,在PC上查看时,图像太大并不是一个问题,因为页眉和页脚在PC/mac浏览器上的反应是正确的。(此外,大多数网站都是响应性的,因此更好的解决方案是,在保持图像AR的同时,让图像以适当的响应性调整大小,而不是应用最大宽度100%。不过,我会调整styleau.css行!我的解决方案通过应用height:auto来保持图像的纵横比。