Responsive Web Design-the problem of Viewport and mobile phone frame getting thicker

A common viewport meta tag for pages optimized for mobile pages is as follows:

<metaName="viewport"content="Width=device-width, initial-scale=1.0"> 

• Width: Controls the size of the viewport, you can specify a value if 600, or a special value, such as device-width for the width of the device (in pixels of the CSS when scaled to 100%).
• Height: corresponds to width, specifying height.
• Initial-scale: The initial zoom ratio, which is the scale at which the page is first load.
• Maximum-scale: Allows the user to zoom to the maximum scale.
• Minimum-scale: The minimum scale to which the user is allowed to zoom.
• User-scalable: Whether the user can scale manually.

An issue in which multiple pixel dots make up a px, causing the phone border to become thicker

Solution (create meta viewport tag):

<script>
var metael=doc.createlement (' meta ');
<!--Retina screen twice X---
var Scale=isretina? 0.5:1;
Metael.setattribute (' name ', ' viewport ');
Metael.setattribute (' content ', ' inital-scale ' = ' +scale+ ', maximum-scale= ' +scale+ ', minimum-scale= ' +scale+ ', User-scalable=no ');

</script>

Responsive Web Design-the problem of Viewport and mobile phone frame getting thicker