Question

我正在尝试了解webview如何以及为何缩放已加载页面的内容。例如，加载页面中400x300px webview中与所有交叉元素上的“margin：0 auto”共享100％宽度和高度的元素变为320x240，预期为400x300。有了这种行为，我得到了非常不愉快的结果，如果Bing地图的结果是平庸的，它不仅仅是瓷砖，还有地图上的图钉，它们被缩放（不包括在样本中）

在下面的屏幕截图中，webview内容位于顶部的iframe底部。

IFrame似乎没有受此影响，尺寸如预期，400x300。我更喜欢使用webview，因为它在两页之间的通信方面更容易。

重现：

使用模板Windows Phone 8，空白应用程序在Visual Studio社区中创建一个新项目

，放置以下代码

<body class="phone">
<p>Content goes here</p>
<x-ms-webview id="mapFrame2" src="ms-appx-web:///pages/map/bing.html" style="-ms-content-zooming: none;width: 100%; height:300px; position: absolute; top: 0px; left: 0px; z-index:999;"></x-ms-webview>
<iframe id="mapFrame2" src="ms-appx-web:///pages/map/bing.html" style="-ms-content-zooming: none;width: 100%; height:300px; position: absolute; top: 310px; left: 0px; z-index:999;"></iframe>

并在引用页面中放置以下内容：

元标记：

http-equiv =“Content-Type”content =“text / html; charset = utf-8” name =“viewport”content =“width = device-width，user-scalable = no”

function initialize() {
    Microsoft.Maps.loadModule('Microsoft.Maps.Overlays.Style', {
        callback: function () {       
            map = new Microsoft.Maps.Map(document.getElementById("mapDiv"), {
                mapTypeId: "r",
                center: new Microsoft.Maps.Location(-32.377200, 148.626183),
                zoom: 5,
                enableClickableLogo: false,
                enableSearchLogo: false,
                customizeOverlays: false,
                showBreadcrumb: false,
                credentials: "",
                disableBirdseye: true,
                showScalebar: false,
                showDashboard: false,
                enableHighDpi: true
            });
        }
    });
}

并且body元素具有

风格= “保证金：0像素;填充：0像素;”

并且在其中是id =“mapDiv”with

的div

style =“position：absolute; width：100％; height：100％; overflow：hidden; 余量：0像素;填充：0像素;“

（将整个html放在这里几乎不可能，因此它被stackoverflow截断）

防止在x-ms-webview

0 个答案: