放大时强制模态不超过手机屏幕？答案

【问题标题】：Force modal to not exceed phone screen when zoomed in?放大时强制模态不超过手机屏幕？
【发布时间】：2016-12-05 06:52:40
【问题描述】：

我正在制作这个网页应用程序，其中页面内容非常大（它是一张地图，应该是这样）当放大地图上的东西变得清晰时，就像使用谷歌地图等时一样。我的地图我可以点击，并弹出一个包含有关该地点的信息的模式，我遇到的问题是模式也被缩小以适合包含大地图的外部 div。

地图在缩放时超过手机屏幕不是问题，这就是它的重点。但问题是出现的模态非常大，所以人们每次想看到模态时都需要缩小，然后再放大地图以找到他们正在寻找的地方。

有没有办法强制将模态框调整到屏幕而不是外部 div 的大小？

一些细节：我正在为我的 webapp 使用 angular.js，模态是来自 ui-bootstrap 的 uibmodal。

地图是一个角度视图内的div，div设置为100%宽度，高度强制为宽度*1.45，这是地图的比例格式。（这是通过 angular 指令完成的，它监听屏幕调整大小事件，以便将高度流畅地设置为正确的数量。

如果我解释得不够清楚，请尝试访问http://146.185.173.50/ca3/#/home 的现场演示 - 您会看到在 PC 浏览器上无法缩放，但如果您使用手机访问应用程序，请放大并单击一个容易注意到模态大小问题的地方。

这个问题很难用谷歌搜索：o 有什么建议吗？

这是从 html 页面激活模式的方式：

<span ng-click="showDialog(shop)" class="shop">{{shop.name}}</span>

这是从 Angular 内部启动的方式：

.controller('ShopCtrl', function ($scope, $location, $uibModal, ShopService, selectedShopFac) {
        $scope.shops = [];
        $scope.selectedShop = selectedShopFac.setSelectedShop({});
        ShopService.getShops().then(
                function (response) {
                    $scope.shops = response.data;
                },
                function (response) {
                    console.log(response.data.toString());
                });
        $scope.showDialog = function (shop) {
            $scope.selectedShop = selectedShopFac.setSelectedShop(shop);
            $uibModal.open({
                templateUrl: 'app/home/shop/shop.html',
                scope: $scope
            });
        };
    })

这是管理“地图”（商店的父 div）大小的指令：

.directive('mapDir', function ($window) {
        return {
            restrict: 'A',
            link: function (scope, element) {

                var mapDiv = element;

                angular.element(document).ready(function () {
                    mapDiv.height(mapDiv.width() * 1.45);

                });

                function onResize() {
                    mapDiv.height(mapDiv.width() * 1.45);
                }

                onResize();
                angular.element($window).on('resize', onResize);
            }
        };

    })

【问题讨论】：

标签： javascript css angularjs twitter-bootstrap bootstrap-modal

【解决方案1】：

所以我找到了一个解决方案。（更像是“变通”）

在我添加到顶部的 shop.html 中：

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=yes" />

maximum-scale=1.0 强制屏幕回到未缩放状态，并且现在模态很好地适合屏幕。虽然地图也再次缩小，但我想避免。（随便）

在控制器中，我添加了一个 .closed.then ，它将操纵元标记回到可缩放状态，因此可以再次放大地图。观看：

$scope.showDialog = function (shop) {
            $scope.selectedShop = selectedShopFac.setSelectedShop(shop);
            $uibModal.open({
                templateUrl: 'app/home/shop/shop.html',
                scope: $scope
            })
            .closed.then(function () {
                $window.document.getElementsByName('viewport')[0].content = "width=device-width, initial-scale=1.0, maximum-scale=3.0, user-scalable=yes";
            });
        };

我在部署后在我的手机（Android 上的 Chrome）上测试了它，它就像一个魅力。虽然它在运行旧版本 chrome + safari 的 ipad 上似乎不兼容。

再一次，这不是对实际问题的 100% 解决方案，但它是一个很好的解决方法，可以完成工作。

【讨论】：