文章/答案/技术大牛

发布

社区首页 >问答首页 >基于用户选择的视图端口大小调整

问基于用户选择的视图端口大小调整
EN

Stack Overflow用户

提问于 2016-10-01 04:52:26

回答 1查看 43关注 0票数 0

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

我打算做的是允许用户在桌面模式(笔记本全屏宽度)和移动模式(媒体宽度<667 to )之间进行更改。

我见过很多主题预览网站都有这个功能。由于这是一个非常常见的特性，我希望可以这样做，但不确定如何准确地实现它。

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

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

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

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

angularjs

html

css

回答 1

Stack Overflow用户

发布于 2016-10-02 07:47:34

首先:给出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>

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/39803165

复制

相似问题

问基于用户选择的视图端口大小调整
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问基于用户选择的视图端口大小调整EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问基于用户选择的视图端口大小调整
EN