基本上我有一个基于 bootstrap 3 的 Angular 元素，用于调整媒体查询的大小。
我打算做的是允许用户在桌面模式(笔记本电脑全屏宽度)或移动模式(媒体宽度 < 667px)之间切换。
我看到很多主题预览网站都有这个功能。由于这是一个很常见的功能，我希望可以通过这种方式完成，但不确定如何准确实现。
注意:我不希望更改现有 CSS 的任何部分。
我对如何实现这一点的看法。
<html ng-viewport="deviceWidth">
<button ng-click="changeDeviceWidth()">
</html>
// initial
$scope.deviceWidth = getDeviceWidthFunction();
$scope.changeDeviceWidth = function (deviceWidth) {
$scope.deviceWidth = deviceWidth;
}
最佳答案
首先:给你视口(viewport)元 id
<meta id="viewport" name="viewport" content="width=device-width, initial-scale=1">
第二:创建选择器按钮
<div id="selecter">
<button onclick="toDesktop()"> Desktop</button>
<button onclick="toTablet()"> Tablet</button>
<button onclick="toMobile()"> Mobile</button>
</div>
第三:添加iframe作为内容查看器
<iframe id="mycontent" src="http://www.majali.net"></iframe>
第四:添加JS函数设置视口(viewport)、内容宽高
<script>
function toDesktop() {
document.getElementById("viewport").setAttribute("content", "width=1200");
document.getElementById("mycontent").style.width='100%';
document.getElementById("mycontent").style.height='600px';
}
function toMobile() {
document.getElementById("viewport").setAttribute("content", "width=340");
document.getElementById("mycontent").style.width='320px';
document.getElementById("mycontent").style.height='480px';
}
function toTablet() {
document.getElementById("viewport").setAttribute("content", "width=767");
document.getElementById("mycontent").style.width='767px';
document.getElementById("mycontent").style.height='600px';
}
</script>
关于angularjs - 查看端口根据用户选择调整大小，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39803165/