iugo/main.html

## main.html
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0">
    <title>Let the viewport width be 360</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/zepto/1.1.6/zepto.min.js"></script>
    <script>
    if (window.innerWidth !== 360) {
        const scale = window.innerWidth / 360;
        const meta = document.querySelector('meta[name="viewport"]');
        meta.setAttribute('content', 'width=360, initial-scale=' + scale + ', user-scalable=no');
    };
    </script>
    <style type="text/css" media="screen">
    body,
    div {
        margin: 10px 0;
        padding: 0;
    }

    div {
        height: 50px;
        background-color: blue;
        color: #fff;
    }
    </style>
</head>

<body>
    <script>
    var text = 'The page width is: ' + window.innerWidth;
    document.write(text);
    // alert(text);
    </script>
    <div data-width="320">
    </div>
    <div data-width="360">
    </div>
    <div data-width="375">
    </div>
    <div data-width="414">
    </div>
    <script>
    $('div').text(function() {
        const width = $(this).data('width');
        $(this).css('width', width);
        return 'This is a block of width ' + width + 'px';
    })
    </script>
</body>

</html>
	<!DOCTYPE html>
	<html>

	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0">
	<title>Let the viewport width be 360</title>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/zepto/1.1.6/zepto.min.js"></script>
	<script>
	if (window.innerWidth !== 360) {
	const scale = window.innerWidth / 360;
	const meta = document.querySelector('meta[name="viewport"]');
	meta.setAttribute('content', 'width=360, initial-scale=' + scale + ', user-scalable=no');
	};
	</script>
	<style type="text/css" media="screen">
	body,
	div {
	margin: 10px 0;
	padding: 0;
	}

	div {
	height: 50px;
	background-color: blue;
	color: #fff;
	}
	</style>
	</head>

	<body>
	<script>
	var text = 'The page width is: ' + window.innerWidth;
	document.write(text);
	// alert(text);
	</script>
	<div data-width="320">
	</div>
	<div data-width="360">
	</div>
	<div data-width="375">
	</div>
	<div data-width="414">
	</div>
	<script>
	$('div').text(function() {
	const width = $(this).data('width');
	$(this).css('width', width);
	return 'This is a block of width ' + width + 'px';
	})
	</script>
	</body>

	</html>