Easy Tutorial
Android Tutorial Drawable Tool Android Tutorial Broadcastreceiver Shell Summary Brackets Android Tutorial Xfermode Porterduff4 Awk Work Principle Csharp Init Variable Programmer Joke 14 Sql Join Image Explain Android Tutorial Webview Error Code Es6 Reflect Proxy The Last Line Effect Programmer Joke 25 Game Programmer Awk Arrays Java Polymorphism Const Char Java Annotation C Assert C Language Pointer From Five Dimensions Verilog Compile Instruction Java Sorting Algorithm Analysis And Implementation Programming Range Awk Built In Functions Linux Tar Gz State Vs Strategy Android Tutorial Service 1 Bucket Sort Code God Annotation Appreciation Css Position Static Relative Absolute Fixed Android Tutorial Button Imagebutton Javascript Console Object Android Tutorial View Viewgroup Intro Programmer Joke 21 Nodejs Callback Func Eclipse Shortcuts Java Inner Class Intro Android Tutorial Edittext Java Protected Keyword Detailed Explanation Programmer Facial Package Summary Android Tutorial Sensor2 Android Tutorial Touchlistener Ontouchevent Php Namespace Intro Redis Intro Data Structure C Get Keycode Python Openssl Vulnerability Scanning Verilog2 Udp Logic Android Tutorial Exercise 2 Zookeeper Setup Python Docstrings Es6 Concise Tutorial Insertion Sort Best Python Ide For Developers Python Append Deepcopy Php Rounding Js Random Python Spider Intro Verilog2 Rtl Low Power Design 2 Verilog Fir Verilog Install Perl Output Chinese Warning This Program Uses Gets Which Is Unsafe Android Tutorial Handler Message Android Tutorial Sqlite 2 Zookeeper Bs Command Android Tutorial Canvas Api2 React Click Event Bind Localstorage Spec Css Nowrap Break Word Verilog2 Specify Prints Diamonds Triangles Rectangles Moible Web Front Source Android Tutorial Alarmmanager Funny Programmer Pictures Android Tutorial Json Decimal Decimals Are Converted To Binary Fractions Android Tutorial Project Src Analysis Es6 String Hdfs Cluster Html5 Canvas Zrender Cpp Header Cpp Vector Container Analysis Awk If Loop Android Tutorial Webview Cache Android Tutorial Popupwindow Verilog2 Gate Rsa Basic Idea Android Tutorial Httpurlconnection Sql Different On And Where Google Python Styleguide Verilog2 Tf Android Tutorial Intent Base Hadoop Tutorial C Volatile Keyword Npm Slow Use Cnpm Verilog Function Openresty Intro Javascript Qrcodejs Library Python Complex Intro Android Tutorial Valueanimator Verilog Process Structure Centos Mail Command Sendmail Verilog Numerical Conversion Structure Variables And Structure Types All Vim Cheatsheat Android Tutorial Baseadapter Python Variable References And Copies Android Tutorial Typeface Js Filter Lists Strlen And Sizeof Git Guide Javascript Basic Types And Reference Types Programming En Cn Javascript Number Capitalization Lua Table Length Analysis Android Tutorial Gridlayout Js Get Current Page Url Android Tutorial Fragment Demo4 Android Tutorial Listener Edittext Change Bit Operation Linux Common Command 2 Csharp Foreach Javascript Find Min Max Android Tutorial Socket1 Android Tutorial Contentprovider 2 Programmer 520 Cpp Difference Between Pointers And References Nginx Setup Intro Ssh Slow Verilog2 Real2Int Python Unboundlocalerror Android Tutorial Activity Js Timer Css Calendar Style Javascript Remove Array Item 2021 Frontend Learnpath Express 4 X Api Android Tutorial Shader Cloud Atlas Engineer Skills Es6 Setup Android Tutorial Drawable2 Find The Best Language Rogramming Languages Used In Most Popular Websites Http Vs Https Linux Shutdown Reboot Python Locals Globals Android Tutorial Radiobutton Checkbox Remainder And The Modulo Javascript Table Search Filter Programmer Joke 18 Javascript Var And Without Var Java Swing Demo Intro Android Tutorial Git Repo Create Es6 Tutorial Android Tutorial Webview Attention Verilog2 Codeguide Android Tutorial Togglebutton Switch Cpp Inline Usage Js Jquery Refresh Iframe Verilog2 Lower Power Design Android Tutorial Sqlite Intro Search Websites Recommand Javascript Image Modal Index Android Tutorial Upload File Android Tutorial Fragment Demo1 Zookeeper Node Feature Cpp Two Colon Usage Verilog2 Timing Check What Is A Virtual Method Intelligent Dev Ops Android Service Tutorial Docker Use Container Create Image Delegate Mode Android Tutorial Git Repo Operate Set Ssh Login Key Verilog Defparam Verilog2 Clock Linux Mysql Import Export Data Programmer Without Network Deconstruction Assignment Python Yield Used Analysis Android Tutorial Relativelayout Javascript Check Null Undefined Android Tutorial Activity Start Android Tutorial Notification Java String And Int Convert Php Develop Tools Python Redis Intro Android Tutorial Smsmanager Android Tutorial Fragment Demo5 Fastjson Intro Coreos Setup Pc Zookeeper Leader Quick Sort Android Tutorial Alertdialog Javascript Autocomplete Detect Empty Javascript Object C Array As Parameter Vue2 Start Coding Verilog Design Method Android Tutorial Interface Design Verilog2 Reset Php Delete An Element From An Array Android Tutorial Fragment Base The Different Of Jre And Jdk Android Tutorial Gridview Verilog Time Delay Database Implementation Svn Co Github Dir Android Tutorial Drawable3 Html Online Editor Zookeeper Tutorial Linux Shell Brackets Features Android Tutorial Ratingbar Es6 Array Programmer Joke 19 Python 5 Underline Android Tutorial Date Time 2 Shell Quick Start Ten Sorting Algorithm Es6 Class Java The Different Float Double Android Tutorial Textview Android Tutorial Socket Intro Android Tutorial Colorfilter1 Verilog2 Integrated Design Website Reward Button While Explain Programmer Alive Radix Sort Verilog2 Sdf Android Tutorial Download1 Cpp Func Setw Android Tutorial Listview Programmer Joke 15 Lets Encrypt Https Android Tutorial Xfermode Porterduff5 Google Chrome Shortcuts 10 Best Program Html Import Css Method Android Tutorial System Architecture Analysis Http X Forwarded For Programmer Joke 24 Android Tutorial Intent Pass Data Java Init Object Process Js Debugging Skills Redis External Network Android Tutorial Alphaanimation Android Tutorial Gestures Android Tutorial Vibrator Android Tutorial Tablelayout Octotree Github Repo C Void Intro Python Subprocess Basic Knowledge Summary Of Spring Cpp Virtual Functions Docker Clear Command Px Em Rem Different Runoob Tool Update Desc Zabbix Monitor Snmptrap Verilog2 Acc Python String Index Viewport Deep Understanding Android Tutorial Ansynctask Programmer Joke 20 Verilog Dds Linux Command Full Fight Es6 Module Javascript Or And And Android Tutorial Mediaplayer Css Search Bar Js Sort List Android Tutorial Sensor3 Npm Switch Repo Android Tutorial Exercise 3 Nvm Manager Node Versions Zookeeper Watcher Android Tutorial Broadcastreceiver 2 Verilog Number Android Tutorial Xml Android Tutorial Animation Php Session Login Android Tutorial Listview Update Php Different Include And Require Working Process Of The Compiler Builder Pattern Android Tutorial Bitmap1 Hadoop Skills Android Tutorial Adapter Android Tutorial Wallpapermanager Scrapy Detail Python Single Thread Multi Thread And Multi Process Verilog Loop How To Make Your Code Self Documenting Cpp Keyword Intro Mysql Different Nnodb Myisam Java Varargs Parameter 9Patch 9 Remove Black Line Window Getcomputedstyle Method Android Tutorial Shadowlayer Verilog2 Clock Switch Android Tutorial Canvas Api3 Cpp Multithread Demo Hex Dec Oct Bin Android Tutorial Scrollview Es6 Promise Android Animationdrawable Meta Verilog2 Gate Delay Java Transient Keywords Android Tutorial Camera Linux Check Port Usage Verilog2 Codestyle Jquery Check Id Is Exists Android Tutorial Telephonymanager 8 Awesome Awk Built In Variables Java Fail Ast Fail Safe Most Popular Javascript Code Specifications Zookeeper Sc 4Lw Scala Different Function Method Verilog2 Acc Sub Java Interface And Polymorphism Android Tutorial Fragment Demo3 Ios Dev Skills Android Tutorial Contentprovider Es6 Number Front End Developer Questions And Answers Ascii Quick Sort 2 Counting Sort Node Multi Version Verilog2 Slow2Fast Android Tutorial Sharedpreferences Es6 Async Tencent Open Source Android Tutorial Windowmanager 15 Php Mind Mapping Android Tutorial Toast Verilog Dividend Verilog Serial Fir Android Tutorial Http Verilog2 Udp Verilog Fsm Android Tutorial Gps Javascript Lightbox Big Data Require Skills Pycharm Import Python Package Cpp Return Array Safety Engineer Skills Hadoop Setup Pip Cn Mirror 2018 Web Developer Shortcut Key C The Structure Of The Parameter Android Tutorial Colorfilterl2 Verilog Competition Hazard Html5 Canvas Eccharts Composer Install And Usage Android Tutorial Spinner Android Tutorial Configuration Csharp Enum Verilog Case Verilog2 Delay Type Verilog Latch Verilog Timing Control Programming Language As A Pepole Verilog Testbench Verilog Statements Block Android Tutorial Socket2 Git Gui Window Mobile Testing Skills Android Tutorial Maskfilter Git Graphical Php Phpmailer 2014 Need To Learn Zookeeper Session Cpp Func Pointer Java Print The Triangle Onreadystatechange Attribute Learn Verilog Basic Syntax Android Tutorial Drawable1 Verilog Data Type Android Tutorial Sign Package Javascript Slideshow Viewport Template C Callback Function Download Js Facade Pattern 3 Chrome Skip Git Five Minutes Tutorial Android Tutorial Progressbar Cpp Static Usage Android Tutorial Soundpool Programmer Mobile Wallpaper Do Not Ignore Web Small Details C Swap Data Android Tutorial End Android Tutorial Bitmap Demo Programmer Joke 17 Cpp Std Thread Factory Pattern C Templates Detail Verilog Module Port Chrome Password Android Tutorial Colorfilter3 Verilog Tutorial Javascript Css Accordion Css Nav Bar Android Tutorial Webview Android Tutorial Exercise 5 All Vim Cheatsheat 3 Verilog2 Other Task Zookeeper Data Sync C Int2Str Verilog Fft Windows10 Java Setup Yaml Intro Programmer Joke 26 Java Composite Pattern 2 Android Tutorial Audiomanager Python Tower Verilog2 Random Filter Filterchain Filterconfig Intro Android Tutorial Decompile Apk Get Code Resources Javascript Toolbox C Static Effect Php Learning Recommend Github Tools Android Oom Android Tutorial Customer Baseadapter Js Call Apply Bind Android Tutorial Service 2 Android Tutorial Sensor1 Python Pip Install Usage Python Round Func Note Heap Sort C Constant Pointer Runoob Architecture Programmer Joke 22 Zookeeper Acl Android Tutorial Menu Android Tutorial Activity Intro Cpp Static Const Android Tutorial Xfermode Porterduff3 Verilog Process Assign Lua Table Length Hdfs Setup Android Tutorial Exercise 1 Android Tutorial Dialog Es6 Let Const Verilog2 Rtl Low Power Design 1 Java Knowledge Structure Diagram Android Tutorial Httpclient Js Get Url Param Verilog2 Setup Hold Time Python Ten Minute Introductory Tutorial Javascript Basic Reference Object Types Cpp Construct Function Initial List Weui For Weixin Web Android Tutorial Xfermode Porterduff Verilog Cic C Structures Intro Front End Standards Android Tutorial Canvas Api1 Verilog Intro Android Tutorial Autocompletetextview Inner Lambda Final Android Tutorial Webservice Bubble Sort Restful Architecture Js Filter Table Verilog2 Pli Intro Android Tutorial Download2 Android Tutorial Callback Event Handle Programmer Joke 16 Internet Organization Github Gcc Parameter Detail Verilog Pipeline Design Python Print Func B Android Tutorial Exercise 4 Closure Intro Verilog2 File These Pain Only Programmers Know C General Function C Dynamic Array Three Tier Architecture C Pointer Detail Hadoop Intro Android Tutorial Genymotion Install Cpp Enums Intro And Strongly Typed Es6 Function Verilog2 Fast2Slow Sql Join The Different Of On And Where Android Tutorial Sensor4 Android Tutorial Layoutinflater Implementation Of Merge Sort Css Percentage Calculation Vscode Tutorial Bridge Pattern2 Programmer Joke 27 Verilog Generate Android Tutorial Imageview Front End Engineers Required Skills Verilog Task Es6 Map Set Runoob Chm 15 Sorting Algorithms Visually Displayed Verilog Sync Verilog2 Udp Timing Intellij Idea Usage Android Tutorial Listview Item Scala Option Some None Android Tutorial 9 Image Python Func Decorators Verilog2 Tutorial Javascript Copy Clipboard Mysql8 Error 1410 42000 You Are Not Allowed To Create A User With Grant Programming Error Zookeeper Linux Cluster Css En Cn Break Line Android Develop Mvp Pycharm Windows Install Code Editor Mysql Stored Procedure Shell Process Substitution Android Tutorial Service 3 Verilog2 Clock Division Python Core Knowledge System Of Programming Px Pt Em Convert Table Csharp Polymorphism2 Web Image Optimization Android Tutorial Valueanimator2 Ubuntu Modify Dns Android Tutorial Listview Checkbox Chrome Extensions Recommended C Single Quotes And Double Quotes Verilog2 Logic Sumarry Bash Shortcut Javascript Check Arrayisobject Summary Of Network Html Meta Intro Verilog Condition Statement Nginx Proxy Balancing Matplotlib Tutorial View Ssh Public Key Mac Scala Chinese Show Python One And Two Star Php Get Url Suffix Programmer Joke 23 Css Search Box Android Tutorial Powermanager Mqtt Intro Android Tutorial Patheffect Python Partial Developer Love Php Web Development Android Tutorial Xfermode Porterduff2 Zookeeper Java Setup Python Understanding Dict Copy Shallow Or Deep Python Basic Datatype Free Html5 Css3 Loaders Preloaders Cpp String Array Pointer Es6 Generator Android Tutorial Listen Event Handle Scala Method Functio Different Java Abstract Interface Different Android Tutorial Android Studio Vmware Install Centos7 The Different This Super Php Remove Firsrt Array Element Embedded Engineer Require Skills Mapreduce Usage Front End Interview A Few Important Points Of Knowledge Js Filter Dropdown Android Tutorial Webview Download File Android Tutorial Bitmap2 Mapreduce Coding Android Tutorial Sdk Problem Solve Shell Read Line Db Solutions Android Tutorial File Jquery Check Element Is Hidden Android Tutorial Intro Clean Code Versus Great Code Cpp Enum Intro Java Compile With Package Html5 Canvas Clock Java Json Instro Android Tutorial Absolutelayout Cpp Const Keyword Android Tutorial Framelayout Linux Autologin Shell Verilog2 Display Open Source License Js Precision Problem And Solution Programming Intro Android Tutorial Mediarecord Reg Lookahead Lookbehind Webpack Tutorial Zookeeper Locks 25 Best Game Engine Libraries For Developers Awk User Defined Functions Js Delete Json Arr Merge Sort Android Tutorial Linearlayout Android Tutorial Fragment Demo2 Android Tutorial Listview Focus Java Math Floor Ceil Rint Round Verilog Deassign Cpp Virtual Function Android Tutorial Development Environment Build Verilog2 Level Modeling Float And Double Different A Beginners Guide To Web Development Struct Size Java Class Forname Python Print Without Newline Verilog2 Fifo C Bool True False Https Ssl Intro Javascript Window Onload Java Stringtokenizer Intro Js Sort Table Es6 Symbol Shell Sort Docker Tricks Js Redirect To Another Webpage Zepto Js Source Analysis C Matrix Exchange Android Tutorial Seekbar Javascript Get The Value Of Text Input Field Wx Xcx Repo Android Tutorial Viewflipper Cglibcode Generation Library Intro Htmlcss Make A Website Mac Os Ssh Pem Builder Pattern 2 Java Capture Group Linux Useful Command Css Style Priority Hbuilder Intro Android Tutorial Exercise 6 Html Windows10 Mysql Installer Macro Definition Verilog2 Tf Sub Android Tutorial Udp Socket Php Ajax Cross Border Javascript Promise Object Android Tutorial Viewpager Python Extends Init Js Timestamp2Date Javascript Search Auto Tip Zookeeper Znode Data Model Verilog Assign Windows Finds Port Usage Android Tutorial Contents Android Tutorial Eclipse Adt Sdk App Java Different Of String Stringbuffer Stringbuilder Getting Started With Typescript Div Scroll Javascript Modals Android App Develop Learning Python Dynamic Var Selection Sort Java Inner Class Summary Python2 Python Raw_Input And Input Java Printf Formate Demo Go Channel Intro Html5 Canvas Intro Android Tutorial Date Time 1 Android Tutorial Expandablelistview Cpp Reference Type Es6 Object Android Tutorial Http Response Header Verilog2 Low Power Facade Pattern 2 Android Tutorial Drawerlayout Verilog Expression Android Tutorial Webview Javascrip Java Transformation Problem Trinocular Operators In Lua
❮ Python String Index Android Tutorial Ansynctask ❯

In-depth Understanding of Viewport

Category Programming Techniques

When restructuring or developing web pages on mobile devices, the first thing to understand is the viewport on mobile devices. Only by understanding the concept of the viewport and clarifying the use of the meta tags related to the viewport can we better adapt or respond to various mobile devices with different resolutions.

I. The Concept of Viewport

In layman's terms, the viewport on mobile devices is the area of the device's screen that can be used to display our web pages. To be more specific, it is the part of the browser (or a webview in an app) that is used to display web pages. However, the viewport is not limited to the size of the browser's visible area; it may be larger or smaller than the browser's visible area. By default, the viewport on mobile devices is generally larger than the browser's visible area. This is because mobile devices generally have smaller resolutions compared to desktop computers. To display traditional websites designed for desktop browsers on mobile devices, mobile browsers set their default viewport to 980px or 1024px (or other values, which are determined by the device itself). However, this results in a horizontal scrollbar because the width of the browser's visible area is narrower than the default viewport width. The following figure lists the default viewport widths of browsers on some devices.

II. 1px in CSS is Not Equal to 1px on the Device

In CSS, we generally use px as the unit. In desktop browsers, 1 pixel in CSS often corresponds to 1 physical pixel on the computer screen, which may give us the illusion that the pixels in CSS are the physical pixels of the device. However, the reality is not the case. The pixel in CSS is just an abstract unit, and the physical pixels represented by 1px in CSS vary across different devices or environments. In web pages designed for desktop browsers, we don't need to be overly concerned about this, but on mobile devices, it is essential to understand this point. In earlier mobile devices, the screen pixel density was relatively low, such as the iPhone 3, which had a resolution of 320x480. On the iPhone 3, one CSS pixel indeed equals one screen physical pixel. Later, with technological advancements, the screen pixel density of mobile devices increased. Starting with the iPhone 4, Apple introduced the so-called Retina display, doubling the resolution to 640x960, while the screen size remained the same. This means that on the same screen size, there are twice as many pixels, and at this time, one CSS pixel equals two physical pixels. Other brands of mobile devices follow the same principle. For example, Android devices can be divided into different levels such as ldpi, mdpi, hdpi, xhdpi, etc., according to screen pixel density, and the resolutions are also diverse. How many screen physical pixels a CSS pixel is equivalent to on Android devices varies depending on the device, and there is no definitive answer.

Another factor that can cause changes in px in CSS is user zoom. For example, when a user zooms in on a page by one time, the physical pixels represented by 1px in CSS will also double; conversely, when the page is zoomed out by one time, the physical pixels represented by 1px in CSS will also halve. This point will be discussed in more detail later in the article.

In mobile and some desktop browsers, the window object has a devicePixelRatio property, which is officially defined as the ratio of physical pixels to device-independent pixels, that is, devicePixelRatio = physical pixels / independent pixels. The px in CSS can be considered as the independent pixels of the device, so through devicePixelRatio, we can know how many physical pixels a CSS pixel represents on the device. For example, on a Retina display iPhone, the value of devicePixelRatio is 2, which means 1 CSS pixel is equivalent to 2 physical pixels. However, it should be noted that there are still some compatibility issues with devicePixelRatio in different browsers, so we cannot fully trust this for now. The specific situation can be seen in this article.

Test results of devicePixelRatio:

III. PPK's Theory of Three Viewports

PPK has conducted extensive research on the viewport on mobile devices (first article, second article, third article), and interested students can take a look. Many data and viewpoints in this article also come from there. PPK believes The value can be a numerical value or one of the strings high-dpi, medium-dpi, low-dpi, device-dpi.

It is particularly noted that when target-densitydpi=device-dpi, 1px in CSS will be equal to 1px in physical pixels.

Since this attribute is only supported by Android and Android has decided to deprecate it.

V. Setting the current viewport width to the width of the ideal viewport

To achieve the ideal viewport, the width of the default layout viewport must be set to the screen width of the mobile device. Since the width in the meta viewport can control the width of the layout viewport, we only need to set the width to the special value width-device.

<meta name="viewport" content="width=device-width">

The following is the test result of this code on various mobile browsers:

It can be seen that with width=device-width, all browsers can change the current viewport width to the width of the ideal viewport. However, it should be noted that on the iPhone and iPad, whether in portrait or landscape mode, the width is always the width of the ideal viewport in portrait mode.

This writing method seems that anyone can do it, who hasn't eaten pork, who hasn't seen a pig run? Indeed, when we develop web pages on mobile devices, no matter whether you understand what a viewport is, you may only need this one line of code.

But you must not know

<meta name="viewport" content="initial-scale=1">

This line of code can also achieve the same effect as the previous line of code and can also change the current viewport to the ideal viewport.

Haha, you are confused, because theoretically, the function of this line of code is only not to scale the current page, that is, the page should be how big it is. So why does it have the effect of width=device-width?

To understand this matter clearly, you must first understand what the scaling is relative to, because the scaling value here is 1, which is no scaling, but it has achieved the effect of the ideal viewport. So, there is only one answer, the scaling is relative to the ideal viewport for scaling. When scaling the ideal viewport by 100%, that is, when the scaling value is 1, isn't it the ideal viewport? The facts have proven that it is indeed the case. The following figure is the test result of the major mobile browsers when set

The test results show that initial-scale=1 can also change the current viewport width to the width of the ideal viewport, but this time it is the IE on the Windows Phone that sets the width to the width of the ideal viewport in portrait mode, whether in portrait or landscape mode. But this minor flaw is already irrelevant.

But what if width and initial-scale=1 appear at the same time, and there is a conflict? For example:

<meta name="viewport" content="width=400, initial-scale=1">

width=400 means to set the current viewport width to 400px, and initial-scale=1 means to set the current viewport width to the width of the ideal viewport. So which command should the browser obey? Is it the one written later? No. When encountering this situation, the browser will take the larger of the two values. For example, when width=400 and the width of the ideal viewport is 320, 400 is taken; when width=400 and the width of the ideal viewport is 480, the width of the ideal viewport is taken. (ps: In the UC9 browser, when initial-scale=1, no matter what the value of the width attribute is, the viewport width is always the width of the ideal viewport at this time)

Finally, in summary, to set the current viewport width to the width of the ideal viewport, you can either set width=device-width or set initial-scale=1, but both have a small flaw, that is, the iPhone, iPad, and IE will not distinguish between portrait and landscape, and will all take the width of the ideal viewport in portrait mode as the standard. So, the most perfect writing method should be to write both, so that initial-scale=1 solves the problem of the iPhone and iPad, and width=device-width solves the problem of IE:

<meta name="viewport" content="width=device-width, initial-scale=1">

VI. More knowledge about meta viewport

1. About scaling and the default value of initial-scale

First, let's discuss the issue of scaling. It has been mentioned before that scaling is relative to the ideal viewport. The larger the scaling value, the smaller the width of the current viewport, and vice versa. For example, on the iPhone, the width of the ideal viewport is 320px. If we set initial-scale=2, the width of the viewport will become only 160px at this time, which is also understandable, as it has Why is it necessary to have an ideal viewport? For instance, a mobile phone with a resolution of 320x480 has an ideal viewport width of 320px, and another phone with the same screen size but a resolution of 640x960 also has an ideal viewport width of 320px. Why should the ideal width of the phone with the higher resolution be the same as that of the phone with the lower resolution? This is because only in this way can the same website look the same or almost the same on devices with different resolutions. In fact, although there are so many different types, brands, and resolutions of mobile phones on the market, their ideal viewport widths can be summarized as just a few, such as 320, 360, 384, 400, etc., all of which are very close to each other. The similarity in ideal viewport widths also means that a website designed for the ideal viewport of one device will not look much different or may even look the same on other devices.

>

Original article link: https://www.cnblogs.com/2050/p/3877280.html

**Click to share notes

Cancel

-

-

-

❮ Python String Index Android Tutorial Ansynctask ❯