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
Vue+element+springboot to implement file download progress bar display function example
Table of contents 1. Demand Background 2. Optimiz...
Analysis of uniapp entry-level nvue climbing pit record
Table of contents Preface Hello World image Set b...
Detailed graphic explanation of hadoop installation and configuration based on Linux7
Prepare the ingredients as shown above (ps: hadoo...
TCP performance tuning implementation principle and process analysis
Three-way handshake phase Number of retries for c...
How to install jupyter in docker on centos and open ports
Table of contents Install jupyter Docker port map...
MySQL slave library Seconds_Behind_Master delay summary
Table of contents MySQL slave library Seconds_Beh...
Example of how to build a Harbor public repository with Docker
The previous blog post talked about the Registry ...
Example of pre-rendering method for Vue single page application
Table of contents Preface vue-cli 2.0 version vue...
Detailed explanation of asynchronous iterators in nodejs
Table of contents Preface What are asynchronous i...
Typical cases of MySQL index failure
Table of contents Typical Cases Appendix: Common ...
Summary of solutions for MySQL not supporting group by
I downloaded and installed the latest version of ...
A collection of possible problems when migrating sqlite3 to mysql
Brief description Suitable for readers: Mobile de...
How to use MySQL binlog to restore accidentally deleted databases
Table of contents 1 View the current database con...
MySQL 4 common master-slave replication architectures
Table of contents One master and multiple slaves ...
Detailed explanation of Mysql self-join query example
This article describes the Mysql self-join query....