Reprinted from: http://blog.csdn.net/yogo_t/article/details/43057499
----------------------------------
First of all, it is a template page that I will use for each project, a HTML file that I have defined after I met a big, small hole.
1 <!DOCTYPE HTML>2 <HTML>3 <Head>4 <MetaCharSet= "Utf-8" />5 <!--The width is set to the actual device width, the initialization multiplier is 1, the minimum multiplier is 1, the maximum multiplier is 1, the user is scaled to no -6 <Metaname= "Viewport"content= "Width=device-width,inital-scale=1.0,minimum-scale=1.0,maximum-scake=1.0,user-scalable=no" />7 <!--Delete the default Apple toolbar and menu bar -8 <Metaname= "Apple-mobile-web-app-capable"content= "Yes" />9 <!--the top of the Apple phone is black -Ten <Metaname= "Apple-mobile-web-status-bar-style"content= "Block" /> One <!--Block browser automatically recognize numbers for phone numbers - A <Metaname= "Fromat-detecition"content= "Telephone=no" /> - <!--Base.css is the underlying style that all projects will use - - <Linkrel= "stylesheet"type= "Text/css"href= "Css/base.css" /> the <!--Content.css is a common style used by all pages in each project - - <Linkrel= "stylesheet"type= "Text/css"href= "Css/content.css" /> - <!--main.css a style file for each page or module - - <Linkrel= "stylesheet"type= "Text/css"href= "Css/main.css" /> + <title></title> - <Scripttype= "Text/javascript"src= "Lib/jquery-1.8.2.min.js"></Script> + <!--base.js for all projects will be used in the JS file - A <Scripttype= "Text/javascript"src= "Lib/base.js"></Script> at </Head> - <Body> - </Body> - </HTML>View Code
The meta above can help me avoid all the good questions.
Problems encountered:
1. On the Apple phone, the input control will have a default style
Solve
1 / * Remove the default style of the Apple Mobile Web button and fix the default fillet of the button * / 2 input[type= "button"]{-webkit-appearance:none;/* Remove input default style *//*border-radius:0px;*/}2. When you click on the a tag, the Android phone will have a blue bottom, and the Apple will have a gray bottom.
Solve
1 / * Shield Click element to show background * / 2 a 3 {4 -webkit-tap-highlight-color:rgba (255,255,255,0); 5 }4. The structure of the right text is realized by the left image.
This structure
(1). The first time to do, the left and right two pieces are used hundred percent, so in different screen because the right font cause there will be layout confusion, and then use the media query to write more than two style files, but there is one is on the flat, the same hundred, the picture on the left is too large, resulting in the right of the text between the spacing to be very large to align, the effect is very Not good
(2). The second time to do, I think of a method, the use of float out of the document flow characteristics, to set a maxwidth picture, but in the device-width* picture hundred =maxwidth, the text is located in the div of the float set to None , and set Margin-left to the width of the picture and the spacing between them.
(3). The third time to do, because looked at some other light app in the horizontal screen, the picture size is still the same, so the width of the picture to die, to a max-width and min-width, with flexible layout flex-box, this back is very simple height this layout problem
5. In the UC open page there will be a cache problem, resulting in sometimes the small effect of changes can not see
Solve
I tried to use the cache to keep it from caching, but instead of using it to load the file (which has not been successfully used yet), I finally added a number of random numbers after the file was loaded, so it was resolved that the test was a cache problem.
6. In the mobile phone page, a lot of time will be used to z-index this property, if the use of this property and then set the corresponding elements, will be more prone to chaos.
Solve
I set the top0{z-index:9999};
top1{z-index:8888};
top2{z-index:7777};
top3{z-index:6666};
TOP4{Z-INDEX:5555};
This way, on each page, the corresponding style is affixed to the line.
7. There is also a multi-column layout column, flexible layout flex-box
In the case of these two layouts, the following layout is more troublesome, especially three columns, and the middle one has left and right borders, the definition of hundred times more trouble.
When you know the multi-column layout column, the elastic layout flex-box after the problem is well solved, but remember that the column of the child elements to give height, otherwise it may be layout confusion
Another problem is that when you set Column-count to 3, that's what happens when you have 7 child elements.
Vertical arrangement, not in line with a normal reading habit, and finally changed to float to layout
The difference between 8.em and REM
EM is relative to the parent layer
REM is relative to the root element
So say, if html{font-size:62.5%};
If you set the 1.5em,child setting at the parent element, the 1.0em is equivalent to the 1.5em of HTML.
In the case where the parent element is set to 1.5em, the child uses REM as the unit of the font-size, then it is necessary to set 1.5rem to be equal to the above effect.
9.backgrond-size, this property is very useful
The usage has a. Hundred percent B. directly to the width of the high c.cover d.contain four kinds of usage, choose to use as required
10. In the iphone, the font will become larger by default when the phone is changed to Flat screen mode
Solve
/* Font size will be larger when you disable iOS horizontal screen */
-webkit-text-size-adjust:none;
11. In the use of <div></div> this structure, is to use block-level elements wrapped img, will appear div height is greater than IMG case, is a bit highly do not know how to come
Solve
Img{display:block;};
12. In the use of media, if the <meta> has set WIDTH=DEVICE-WIDHT, media in the settings Max-width Min-width, here can not use max-device-width and Min-device-height, or it'll be no effect.
13. Currently mobile phone web can not disable the mobile phone horizontal screen, if you have a problem with the layout of the page, the horizontal screen will appear when the layout of the chaotic situation
Solve
Pop a layer on the horizontal screen to correct him.
For example
The problem and solution of making mobile phone web half-year
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
