<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,user-scalable=0" />
<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
</head>
<body>
<style>
body{ background-image: linear-gradient(-sharp0e142c, -sharp141f3d); }
html,body,-sharpmain{ min-height: 100%; }
</style>
<div id="main"></div>
<script>
initViewport();
function initViewport(){
var idaelViewport = window.screen ? window.screen.width: $(window).width();
var visualViewport = 375;
var zoomView = idaelViewport / visualViewport;
$("meta[name="viewport"]").attr("content",
"user-scalable=no,width=" + visualViewport + ",initial-scale=" + zoomView + ", minimum-scale=" + zoomView + ", maximum-scale=" + zoomView + ",viewport-fit=cover"
);
};
</script>
</body>
</html>Why does the code above add a gradual change of color to body or add a background picture? there will be a white line at the bottom of ios plus. How to solve Android