Question

我正在开发一个响应式网站，当我在移动模拟器上查看网站并重新调整浏览器的大小时，所有响应都很完美但是当我在实际的移动设备上查看该网站时没有调整大小

这是我的HTML头

<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"></head>

这是我的CSS

 @media handheld, screen and (max-width: 768px), screen and (max-device-width: 768px) and (orientation: portrait) {{css styles}}

任何一个帮助??

Answer 1

删除掌上电脑的媒体查询，这些天移动设备属于屏幕区域。

查看http://mediaqueriestest.com，确切了解当前设备的响应情况。

Answer 2

在head section中使用以下代码：

<meta name="viewport" content="width=device-width, initial-scale=1">

媒体查询元标记不起作用

2 个答案: