A mobile adaptive web page effect solves the problem of small display page
|
For work needs, I need to make a mobile phone adaptive web page effect. Finally got it done, share and record it first! In fact, the main thing is to change the HTML page declaration: Add the following code to the web page and it will display normally: Copy code The code is as follows:<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"/> explain: width - the width of the viewport height - the height of the viewport initial-scale - the initial scale minimum-scale - the minimum scale the user is allowed to zoom to maximum-scale - The maximum scale to which the user is allowed to zoom user-scalable - whether the user can manually scale To simplify it, you can change the above code to the following code, the effect is the same: Copy code The code is as follows:<meta content="width=device-width,user-scalable=no" name="viewport"> Finally, don’t set a specific width attribute that is too large. For example, if you set the Body width attribute to 1000px on a web page, this is definitely not acceptable. However, you can set it to 90%, which is screen adaptive. PS: I made an effect page, which can be displayed normally on a mobile phone. |
<<: In-depth analysis of Flex layout in CSS3
>>: Summary of various postures of MySQL privilege escalation
Recommend
JavaScript modularity explained
Table of contents Preface: 1. Concept 2. The bene...
Solution to web page confusion caused by web page FOUC problem
FOUC is Flash of Unstyled Content, abbreviated as ...
Pure CSS to adjust Div height according to adaptive width (percentage)
Under the requirements of today's responsive ...
Nginx tp3.2.3 404 problem solution
Recently I changed Apache to nginx. When I moved ...
3 different ways to clear the option options in the select tag
Method 1 Copy code The code is as follows: documen...
How to view mysql binlog (binary log)
For example, when you create a new table or updat...
Four data type judgment methods in JS
Table of contents 1. typeof 2. instanceof 3. Cons...
Solve the problem that the VMWare virtual machine centos time is inconsistent with the local time
The time of VM Ware virtual machine centos is inc...
Detailed explanation of the use and difference between relative and absolute in HTML
The difference between relative and absolute in H...
Server stress testing concepts and methods (TPS/concurrency)
Table of contents 1 Indicators in stress testing ...
Vue implements simple calculator function
This article example shares the specific code of ...
Solution to MySQL replication failure caused by disk fullness
Table of contents Case scenario Solving the probl...
Detailed explanation of how to pass password to ssh/scp command in bash script
Install SSHPASS For most recent operating systems...
Some summary of html to pdf conversion cases (multiple pictures recommended)
Due to work requirements, I recently spent some t...
About WSL configuration and modification issues in Docker
https://docs.microsoft.com/en-us/windows/wsl/wsl-...