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

< meta name = "viewport" content = "initial-scale=1.0" >

More ways to write:

XML/HTML CodeCopy content to clipboard

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:

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

Solve the problem that the MySQL database crashes unexpectedly, causing the table data file to be damaged and unable to start

Problem: The MySQL database crashed unexpectedly ...

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

XHTML Web Page Tutorial

HTML+CSS+JS realizes canvas follows the mouse small circle special effect source code

mysql startup failure problem and scenario analysis

MySQL uses frm files and ibd files to restore table data

MySQL service and database management

Serial and parallel operations in JavaScript

Several ways to center a box in Web development

How to set the text in the select drop-down menu to scroll left and right

ElementUI implements cascading selector

12 types of component communications in Vue2

Recommend

Detailed explanation of Linux system input and output management and common functions of vim

mysql 5.7.18 winx64 password change

CSS example code to hide the scroll bar and scroll the content

Perfect solution to the problem of MySQL shutting down immediately after startup (caused by ibdata1 file corruption)

A practical tutorial on building a fully distributed Hadoop environment under Ubuntu 16.4

How to add custom system services to CentOS7 systemd

A brief discussion on React Component life cycle functions

Detailed steps to build a file server in Windows Server 2012

Installation of CUDA10.0 and problems in Ubuntu

How to use Flex layout to achieve scrolling of fixed content area in the head

Solve the problem that the MySQL database crashes unexpectedly, causing the table data file to be damaged and unable to start

Detailed explanation of JavaScript to monitor route changes

Detailed tutorial on how to deploy Springboot project using Nginx on the server (jar package)

Three strategies for rewriting MySQL query statements

JavaScript implements the protocol example in which the user must check the box