我正在制作一个响应式网站,我一直在计算机上的Chrome上对其进行测试。我可以调整它的大小,它可以更改布局等,即使屏幕最薄,看起来也非常好。
但是,我使用 Chrome 在手机上测试了该网站,它看起来不一样?
我添加了这个:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
到我的HTML的顶部。
出了什么问题?
编辑:
@media screen and (max-width: 475px) {
#footer {
height: 75px;
}
#left_footer,
#right_footer {
text-align: center;
width: 100%;
}
#left_footer {
bottom: 25px;
}
}
你有一个相当低的最大宽度值:许多新的智能手机都有高分辨率的屏幕。我通常以 720 像素或更低的像素开始移动样式。