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

Inspiring Design Examples of Glossy and Shiny Website Design

This collection showcases a number of outstanding ...

Detailed explanation of CSS weight value (cascading) examples

•There are many selectors in CSS. What will happe...

How to implement a simple HTML video player

This article introduces the method of implementin...

JS implements click drop effect

js realizes the special effect of clicking and dr...

How to change the root password in a container using Docker

1. Use the following command to set the ssh passw...

50 Super Handy Tools for Web Designers

Being a web designer is not easy. Not only do you...

Solve the problem that VMware cannot install 64-bit operating system in win10 home version

Problem Description When VMware Workstation creat...

MySQL triggers: creating multiple triggers operation example analysis

This article uses an example to describe the crea...

Analyzing the node event loop and message queue

Table of contents What is async? Why do we need a...

Detailed explanation of JavaScript to monitor route changes

Table of contents history pushState() Method push...

Introduction to the functions and usage of value and name attributes in Html

1. The value used in the button refers to the text...

A detailed introduction to the netstat command in Linux

Table of contents 1. Introduction 2. Output Infor...

Is a design that complies with design specifications a good design?

In the past few years of my career, I have writte...

Detailed analysis of MySQL master-slave delay phenomenon and principle

1. Phenomenon In the early morning, an index was ...

JavaScript implements simple date effects

The specific code of JavaScript date effects is f...