Question

我想“模仿”网站在手机中的外观。所以，例如下一个代码：

<div>
    <div class = "col-md-6 col-sm-6 col-xs-12">
      First
    </div>
    <div class = "col-md-6 col-sm-6 col-xs-12">
      Second
    </div>
</div>

必须始终查看xs-12版本的网站。我尝试使用<meta id="viewport" name=viewport content="width=200px; initial-scale=1">，但它对我不起作用。

Answer 1

您可以使用Google Chrome开发工具并模拟移动体验：https://developer.chrome.com/devtools/docs/device-mode它不仅可以模拟用户代理，还可以模拟地理定位和其他设备内容

Answer 2

嗯......它会在你的浏览器中复制分辨率具有相同的效果，例如。 Resizer（移动版游记）或使用网站iPadPeek

您的浏览器不会阅读<meta>视口信息。在这种情况下，您将无法获得完整的移动视图＆＃39;或经验。

如果您尝试在实际的移动设备上执行此操作（这不会是模拟器）;并且它不起作用你需要显示相关的CSS样式。 Meta视口声明适用于CSS3媒体查询。

现在，如果您想创建一个按钮来打开一个移动尺寸的新窗口..您可以执行以下操作。

<button onclick="myFunction()">Try it</button>

<script>
function myFunction() {
    var myWindow = window.open("", "", "width=320, height=460");
}
</script>

但同样，这不是一个完整的移动复制......只是一个类似分辨率的弹出窗口。

移动视图模拟器，Javascript / HTML

2 个答案: