重置元视口以适应手机

时间:2018-12-04 17:43:40

标签: html css

我正在设置网页<meta name="viewport" id="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>的元视口,然后将其重置。

var winWidths    = (document.body) && (document.body.clientWidth) ? document.body.clientWidth : window.innerWidth;
var defaultWidth = 750;
var viewport     = document.getElementById('viewport');
var appScale     = winWidths >= defaultWidth ? 1 : (winWidths / defaultWidth);
viewport.content = 'width=device-width,initial-scale=' + appScale + ', minimum-scale=' + appScale + ', maximum-scale=' + appScale;

工作成功。我可以在移动页面上使用px。无需计算rem。但... 有时,两个imgbackground之间会显示一条白线,如下所示:enter image description here

那是我的代码:

<template>
    <div class="wrapper">
        <div><img src="./timg.jpeg"></div>
        <div><img src="./timg.jpeg"></div>
    </div>
</template>

<script>
    export default {

    }
</script>

<style>
    .wrapper {
        width: 100%;
        height: 100%;
    }
    img {
        display: block;
    }
</style>

如何修复它,为什么?

0 个答案:

没有答案