响应式移动设计

时间:2017-06-09 05:46:29

标签: jquery-mobile mobile responsive-design

我开发了一个网站。桌面布局很好。但它没有响应。我尝试使用媒体查询移动设备,

@media only screen
and (min-device-width: 320px) and (max-device-height: 640px)
{
.....
}

我正在使用chrome开发工具,并根据320 x 640的大小对网站进行更改。现在问题在模拟器中很好,但在实际的移动设备中却没有。

帮我找到解决方案。

1 个答案:

答案 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