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
MySQL 8.0.20 installation and configuration tutorial under Docker
Docker installs MySQL version 8.0.20 for your ref...
JavaScript to implement simple carousel chart most complete code analysis (ES5)
This article shares the specific code for JavaScr...
GZIP compression Tomcat and improve web performance process diagram
1. Introduction I recently worked on a project an...
Detailed explanation of the process of querying user permissions using mysql statements
In MySQL, how do you view the permissions a user ...
Solution to the VMware virtual machine prompt that the exclusive lock of this configuration file failed
After VMware is abnormally shut down, it prompts ...
Vue Element front-end application development: Use of API Store View in Vuex
Table of contents Overview 1. Separation of front...
CSS Standard: vertical-align property
<br />Original text: http://www.mikkolee.com...
MySQL 8.0.18 installation and configuration method graphic tutorial under MacOS
This article records the installation of MySQL 8....
How to operate the check box in HTML page
Checkboxes are very common on web pages. Whether ...
HTML Basics Must-Read---Detailed Explanation of Forms, Image Hotspots, Web Page Division and Splicing
1. Form <form id="" name=""...
Summary of Linux file basic attributes knowledge points
The Linux system is a typical multi-user system. ...
Docker and iptables and implementation of bridge mode network isolation and communication operations
Docker provides multiple networks such as bridge,...
Let you understand the deep copy of js
Table of contents js deep copy Data storage metho...
A brief discussion on front-end network, JavaScript optimization and development tips
1. Network Optimization YSlow has 23 rules. These...
Docker-compose image release process analysis of springboot project
Introduction The Docker-Compose project is an off...