Viewport viewport (Visual Area window) Setup
When we try to output the width of the screen in the iphone, we find that the screen width is 980, which is almost as large as the PC screen.
Apple-led mobile phone manufacturers, in order to enable users to get a complete web experience, many devices will deceive the browser to return a large number of viewports, tell the browser, do not think I am small, but I want to display this page in 980px width (resolution and viewport is not related (in development based on the viewport to calculate))
The viewport is very inconvenient for us to implement the response style. 980 is too big to meet the expectations in our hearts, we believe that mobile phone screen size should be between 320 and 400
The default is not set viewport general viewable area width on mobile is 980, all mobile phone responsive website, have to add meta viewport viewport constraint mark
Solve this problem as long as you constrain the viewport:
<content= "Width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale= 1.0,user-scalable=no " name=" Viewport " ID=" viewport "/>
A meta-meta tag with an ID and a name of viewport, which means that the viewport is now constrained
The rules for specific constraints are written in the content, with each constraint rule separated by commas:
The width of the width=device-width command viewport changes to a device's width (typically between 320 and 380 for phones, such as the 1024x768 screen for standard iphones), (number| | Device-width)
initial-scale=1.0 Command Viewport default zoom level is 1 (can be set to any number, calculated in multiples, IOS10 no effect)
minimum-scale=1.0 Command viewport minimum zoom level is 1 (can be set to any number, calculated in multiples, IOS10 no effect)
maximum-scale=1.0 Command Viewport maximum zoom level is 1 (can be set to any number, calculated in multiples, IOS10 no effect)
User-scalable=no does not allow users to scale pages (yes| | NO) (can be set to any number, calculated in multiples, IOS10 no effect)
Some of the other settings
Force Horizontal or vertical screen settings (X5 kernel browser is supported)
Can be set to protrait (vertical screen) and andscape (horizontal screen)
<name= "x5-orientation" content= "Portrait"/>
Set full screen (X5 kernel is active)
<name= "X5-fullscreen" content= "true"/>
UC Browser Force vertical screen or horizontal screen display
Can be set to protrait (vertical screen) and andscape (horizontal screen)
<name= "screen-orientation" content= "Portrait" >
UC Full Screen display
<name= "Full-screen" content= "yes">
In other browsers, if you want to block the horizontal screen display function, you can use the gyroscope method to do, specific view: Mobile page of the gyroscope operation this article
<name= "format-detection" content= "Telephone=no, Email=no" />
Disable identification of mobile phone numbers and mailboxes
<name= "format-detection" content= "Telephone=no, Email=no" />
The above settings are global settings, if there is a place on the page need to identify the phone number and mailbox then you can use the following settings
<href= "tel:18888888888"> please call 18888888888</A ><href= "Mailto:[email protected]"> Please send mail </a>
Some common problems with mobile page development (the following styles need to be reset before development)
Clear Click Shadows for labels such as Input,a,button
On the mobile side Input,a,button These three tabs will have the default shadow when clicked, then how to remove or replace the other shadow style, you can use the following property to set (the following is to remove the shadow)
-webkit-tap-highlight-color:rgba (0, 0, 0, 0);
<style>A, input, button{-webkit-tap-highlight-color:rgba (0, 0, 0, 0); }</style><Body> <ahref= "Http://miaov.com">Good Taste Class-I'm Mo Tao</a> <inputtype= "button"value= "button"></Body>
Clear the rounded corners of the button
Both tabs on the mobile input and button will have rounded corners by default and can be removed using the following two styles
{ -webkit-appearance: none; Border-radius: 0;}<style>A, input, button{-webkit-tap-highlight-color:rgba (0, 0, 0, 0); }Input, Button{-webkit-appearance:None;Border-radius:0; }</style><Body> <ahref= "Http://miaov.com">Good Taste Class-I'm Mo Tao</a> <inputtype= "button"value= "button"></Body>
Check text settings (set to unchecked)
Android is not compatible with this property and can use events to be compatible with
-webkit-user-select:none;
Suppress text scaling
-webkit-text-size-adjust:100%;
Default font settings
Because the mobile side, each phone default font is different, so need to reset, as to reset what kind of font to decide
Font-family:helvetica;
Font boosting
In a paragraph of text we did not set his height, in the WebKit kernel, the size of the text is enlarged by the browser, the solution: Set the height or set the maximum height max-hieght
Fixed positioning on the mobile side of the problem
Issues with mobile iOS rebound
Problems with overflow under iOS
That is to say that the body under an element beyond the width of the page, even if the body set overflow for hideen, under the iOS also no use, the solution is to wrap all the child elements under the body on a div
<!DOCTYPE HTML><HTMLLang= "en"><Head> <MetaCharSet= "UTF-8"> <Metaname= "Viewport"content= "Width=device-width,user-scalable=no"> <title>Document</title> <styletype= "Text/css">HTML{Height:100%;Overflow:Hidden; }Body{Height:100%;margin:0;Overflow:Hidden;position:relative; }. Wrap{Height:100%;Overflow:Auto; }Header{position:Absolute;width:200%;Height:40px;background:rgba (0, 0, 0,. 5);Color:#fff;text-align:Center; } Section{Padding-top:40px; } </style></Head><Body> <Divclass= "Wrap"> <Header>I was a head</Header> < Section>page Content<BR/> </ Section> </Div></Body></HTML>
Some common settings for mobile-page development
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
