Mobile browser Viewport parameters (web front-end design)
|
Mobile browsers place web pages in a virtual "window" (viewport), which is usually wider than the screen. This way, there is no need to squeeze each web page into a small window (which would destroy the layout of web pages that are not optimized for mobile browsers). Users can view different parts of the web page by panning and zooming. The mobile version of Safari has recently introduced the viewport meta tag, which allows web developers to control the size and scaling of the viewport. Other mobile browsers also basically support it. Viewport Basics A commonly used viewport meta tag for a mobile-optimized page looks like this: <meta name=”viewport” content=”width=device-width, initial-scale=1, maximum-scale=1″> width: controls the size of the viewport. You can specify a value, such as 600, or a special value, such as device-width, which is the width of the device (in CSS pixels when scaled to 100%). height: Corresponding to width, specifies the height. initial-scale: The initial zoom ratio, that is, the zoom ratio when the page is loaded for the first time. maximum-scale: The maximum scale to which the user is allowed to zoom. minimum-scale: The minimum scale to which the user is allowed to zoom. user-scalable: Whether the user can manually scale the image. Yes or No |
<<: Detailed explanation of the process of using GPU in Docker
>>: CSS screen size adaptive implementation example
Recommend
A brief discussion on the perfect adaptation solution for Vue mobile terminal
Preface: Based on a recent medical mobile project...
How does Vue solve the cross-domain problem of axios request front end
Table of contents Preface 1. Why do cross-domain ...
Summary of changes in the use of axios in vue3 study notes
Table of contents 1. Basic use of axio 2. How to ...
How to configure the My.ini file when installing MySQL5.6.17 database
I recently used the MySql database when developin...
Detailed analysis of the problem of adding where conditions using left join in MySQL
Current demand: There are two tables, group and f...
The solution to the page not refreshing after the route changes after react jumps
Table of contents question Solution question Ther...
JS implements random generation of verification code
This article example shares the specific code of ...
Linux system calls for operating files
Table of contents 1. Open the file Parameter Intr...
Determine the direction of mouse entry based on CSS
In a front-end technology group before, a group m...
Comparison between Redis and Memcache and how to choose
I've been using redis recently and I find it ...
Detailed understanding and comparative analysis of servers Apache, Tomcat and Nginx
1 Question The company's server uses Apache, ...
Two ways to install Python3 on Linux servers
First method Alibaba Cloud and Baidu Cloud server...
Do you know the weird things in Javascript?
Our veteran predecessors have written countless c...
H tags should be used reasonably in web page production
HTML tags have special tags to handle the title of...
Analysis of the implementation method of modifying the default network segment of Docker
background All of the company's servers are p...