我建立了响应式网站，我想在移动设备上运行，为此我也编写了媒体查询。我在这里给出了我的html格式：
<!DOCTYPE html>
<html lang="en">
<head>
<meta name='viewport' content="width=device-width, initial-scale=1.0"/>
<meta charset="utf-8">
...<!-- meta tags,scripts for mobile devices as well as others-->
</head>
<body>
<div class="home container-fluid">
... <!-- my first page-->
</div>
<div class="home container-fluid">
... <!-- my second page -->
</div>
</body>
</html>
我必须在HTML中做任何更改吗？ 此代码适用于桌面版本，当我检查谷歌浏览器上的元素时，它看起来适合所有设备但在我在实际移动设备上测试时无法正常工作。假设，我为iphone6 plus编写了媒体查询，如下所示：
@media only screen and (min-device-width: 414px) and
(max-device-height: 736px) and (orientation : landscape)
{
...// styles for various classes and ids for landscape of iphone6+
}
@media only screen and (min-device-width: 414px) and
(max-device-height: 736px) and (orientation : portrait)
{
... // styles for portrait mode in iphone6+
}
现在，如果我通过chrome中的inspect元素检查并检查iphone6 +，它看起来不错，但如果我尝试使用实际的iphone 6+，那么效果不佳。 我该怎么做才能使我的网站在实际设备上正常运行。目前，它仅适用于模拟器。