我开发了一个网站。桌面布局很好。但它没有响应。我尝试使用媒体查询移动设备,
@media only screen
and (min-device-width: 320px) and (max-device-height: 640px)
{
.....
}
我正在使用chrome开发工具,并根据320 x 640的大小对网站进行更改。现在问题在模拟器中很好,但在实际的移动设备中却没有。
帮我找到解决方案。
答案 0 :(得分:1)
您描述的症状表明您的页面头部可能没有视口元素,因此请先仔细检查。
你想要的是
<head>
...
<meta name="viewport" content="width=device-width, initial-scale=1.0">
...
</head>
有关viewport元标记的更多信息 https://developer.mozilla.org/en/docs/Mozilla/Mobile/Viewport_meta_tag