Recent projects, the white becomes non-underlined link in the blue underlined iphone, iphone css obviously does not support the link, and quickly google, Baidu, I found many css style iphone actually do not support.
Workaround: add an extra <div> tag, custom colors and underline to a label, note that a label can not have a background image
<li> <div style="background: url(/resources/main/images/button111.png) no-repeat;width:100%;min-width:130px;"> <a style="display:block;color:white;font-weight:bold;text-align:center;text-decoration: none;" href="tel:135727322177">135727322177</a> </div> </li>
Note plus benefits and content after a set href tag: you can ensure compatibility with various mobile phone click on the phone number direct dialing
extract:
- UC will be judged on the site is not WAP station, causing it (UCWEB) considered to be different and stand not resolve WAP WAP station. For example: www.a.com both Wap.a.com and pointing to the same directory the same server, it will be found out to resolve the two different styles. Mainly in support of margin, padding, background-image is not the same.
- UC version of WinPhone white color of the font support is not good, it will resolve to black
- UC Iphone version of the word if it is a white color, and the background is the picture, the white color of the word will not show up, but if you click, and there are indeed found the link
- UC preload, UC will be pre-loaded links (after pre-load access speed is particularly fast, as it has been loaded well), preloaded link will show green, which requires the design renderings of the words we have to take this into consideration
- UC to Response.Redirect support is not very good, and sometimes did not link the address bar to jump (or now link). For example the question: www.a.com both Wap.a.com and pointing to the same server with a directory, it will be found out to resolve the two different styles. I had wanted to use jumps way to achieve (whether or Response.Redirect and change http-equiv = 'refresh' content = ""), but the results did not find the line. I think it is because UC recognize only the source page, do not recognize the page after the jump. Because I refresh the style changed for the better, not just the same problem in my page, UC Home navigation in some of them there is the problem.
Does not support CSS- (more skeptical conclusions of them, because some of my projects css property in the actual test mobile phone is supported, tentatively the first excerpt of it)
- It does not support font-family property, that is, UC browser, you see only one font;
- Does not support font-szie property, that is, UC browser, you can only see the same size of the font;
- Does not support the width, height, padding, margin, line-height property, that is, UC browser only to change by p, br and other HTML tags up and down the line to reach the character spacing;
- It does not support fixed pixel width, 100% of the display page, that is, UC browser will always see is "full screen";
- Does not support floating, stacked layout, float position and invalid properties, that is, UC browser, you can only see the "Left."
- Support background-color, but does not support background-image, that is to say does not support CSS background image is displayed in the UC browser, you can see the background color. (Skeptical, because the display projects is to support background images)
- Does not support padding margin
- The best way to not "support" nested tables, the solution is to put a row, show the effect is certainly with his own imagination is the same, otherwise, and their ideas have a certain gap.
- Does not "support" map
- It does not support line-height
- Does not support strong
- Not supported ul li
- Does not support float
- There are default input border, remember to add: border: none;
Note : If the case does not support css, you can change its label, such as improved ul li to table, to solve the problem.
Focus link (hover)
Each browser are customized links hover styles, such as some browser add links to the border when the focus, add a background color and the like when some browsers to link to focus. So small screen mobile devices without having to write pages hover styles in CSS.
Mouse events (mouseover)
taking into account the touch-screen operation, users can not operate over with a finger, it should prohibit the use of mobile devices to access the web pages used in the mouseOver .
Consider the effect of the mouse touches, such as navigation touched the whole li, rather than simply a
Support for Web standards
Ensure that the top of the page there: <DOCTYPE html!>
For iPad and iPhone style distinguished:
<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css">
<link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css">
<!--[if !IE]>-->
<link type="text/css" rel="stylesheet" media="only screen and (max-device-width:480px)" href="iPhone.css" />
<link type="text/css" rel="stylesheet" media="only screen and (min-device-width:768px) and (max-device-width:1024px)" href="iPad.css" />
<!--<[end IE]>-->
Reproduced in: https: //www.cnblogs.com/JoannaQ/archive/2013/02/21/2919887.html