Implementation code for automatically adapting the width of the web page to the width of the mobile phone screen (viewport)

Implementation code for automatically adapting the width of the web page to the width of the mobile phone screen (viewport)

The general way of writing is as follows:

XML/HTML CodeCopy content to clipboard
  1. < meta   name = "viewport"   content = "initial-scale=1.0" >   

More ways to write:

XML/HTML CodeCopy content to clipboard
  1. 1. < meta   name = "viewport"   content = "width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=2.0, user-scalable=yes"   />        


Adding the above sentence in the <head> of a web page will allow the width of the web page to automatically adapt to the width of the mobile phone screen.
in:

width=device-width: indicates that the width is the width of the device screen
initial-scale=1.0: indicates the initial scaling ratio
minimum-scale=0.5: indicates the minimum zoom ratio
maximum-scale=2.0: indicates the maximum zoom ratio
user-scalable=yes: Indicates whether the user can adjust the zoom ratio

If you want to open the web page, it will automatically display in its original proportions and not allow users to modify it, then:


Copy code
The code is as follows:

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />


After writing in this way, you can set the width of some header banners and other images to style="width:100%", and the entire page will look full screen on the device.

<<:  How to set the height of the autosize textarea in Element UI

>>:  Issues with Rancher deployment and importing K8S clusters

Recommend

Linux Samba server super detailed installation and configuration (with problem solving)

Table of contents Introduction to Samba Server Sa...

Hyper-V Introduction and Installation and Use (Detailed Illustrations)

Preface: As a giant in the IT industry, Microsoft...

Detailed explanation of the workbench example in mysql

MySQL Workbench - Modeling and design tool 1. Mod...

Detailed analysis of compiling and installing vsFTP 3.0.3

Vulnerability Details VSFTP is a set of FTP serve...

VUE+SpringBoot implements paging function

This article mainly introduces how to implement a...

How to use js to communicate between two html windows

Scenario: When page A opens page B, after operati...

Example of using nested html pages (frameset usage)

Copy code The code is as follows: <!DOCTYPE ht...

Example code for using HTML ul and li tags to display images

Copy the following code to the code area of ​​Drea...

Reasons why MySQL 8.0 statistics are inaccurate

Preface Whether it is Oracle or MySQL, the new fe...

Recommended plugins and usage examples for vue unit testing

Table of contents frame First-class error reporti...

Nginx restricts IP access to certain pages

1. To prohibit all IP addresses from accessing th...

JavaScript timer to achieve seamless scrolling of pictures

This article shares the specific code of JavaScri...

Summary of several common ways to abbreviate javascript code

Table of contents Preface Arrow Functions Master ...

Methods and steps to use http-proxy-middleware to implement proxy cross-domain in Node

Table of contents 1. Install the proxy module 2. ...

Example of how nginx implements dynamic and static separation

Table of contents Deploy nginx on server1 Deploy ...