Question

基本上我有一个基于bootstrap 3的角度项目，用于调整媒体查询的大小。

我打算做的是允许用户在桌面模式（笔记本电脑全屏宽度）或移动模式（媒体宽度<667px）之间切换。

我看到很多主题预览网站都有此功能。由于这是一个非常常见的功能，我希望它可以通过这种方式完成，但不确定如何实现它。

注意：我不希望改变现有CSS的任何部分。

我对如何实现这一点的看法。

<html ng-viewport="deviceWidth">
    <button ng-click="changeDeviceWidth()">
</html>

// initial
$scope.deviceWidth = getDeviceWidthFunction();
$scope.changeDeviceWidth = function (deviceWidth) {
    $scope.deviceWidth = deviceWidth;
}

Answer 1

首先：为你的viewport meta提供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函数来设置视口，内容宽度和高度

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

查看端口根据用户选择调整大小

1 个答案: