软件开发|编程技术|编程代码|编程入门先学什么—程序设计语言

CSS3 Media Queries在iPhone4和iPad上的运用

CSS3 Media Queries的介绍在本站上的介绍已有好几篇文章了,但自己碰到的问题与解决的文章还是相对的较少。前几天在《修复iPhone上submit按钮bug》上介绍了修复form中sumit按钮的bug。同一个项目,为了实现iPhone和iPad横板与竖板的风格,让我还是头疼了一翻。

一开始按照CSS3 Media Queries模板中的介绍来运用,虽然帮我解决了iPad的横板与竖板的风格渲染问题,但在iPhone4上还是存在问题的。后来结过网上的查找,总算是问题解决了,下面就来看看问题是如何解决的。

在具体开始之前,先来看看他的源码:

<!DOCTYPE HTML><html lang="en-US"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"><title>login form</title><style type="text/css" media="screen">button,input{  margin: 0;  font-size: 100%;  vertical-align: middle;  *overflow: visible;  line-height: normal;}button::-moz-focus-inner,input::-moz-focus-inner {  padding: 0;  border: 0;}button,input[type="button"],input[type="reset"],input[type="submit"] {  cursor: pointer;  -webkit-appearance: button;}body {margin: 0;padding: 58px 2% 2%;  background: -webkit-gradient(  linear,   left top,   left bottom,   color-stop(0%,rgba(61,157,179,1)),   color-stop(15%,rgba(61,157,179,0.3)),   color-stop(40%,rgba(61,157,179,.5)),  color-stop(70%,rgba(239,239,239,.4)),  color-stop(100%,rgba(239,239,239,0.3)));background: -webkit-linear-gradient(top, rgba(61,157,179,1) 0%,rgba(61,157,179,0.8) 15%,rgba(61,157,179,.5) 40%,rgba(239,239,239,.4) 70%,rgba(239,239,239,0.3) 100%);  background-repeat: no-repeat;background-attachment: fixed;}form {margin: 0;padding: 0;}form fieldset {border: none;border-radius: 10px;box-shadow: inset 0 0 2px rgba(0,0,0,0.3),0 0 5px rgba(0,0,0,0.13);background-color: rgba(255,255,255,0.8);  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(rgba(255,255,255,0.8)), to(rgba(216,216,216,0.8)));  background-image: -webkit-linear-gradient(top,rgba(255,255,255,0.8), rgba(216,216,216,0.8));  background-repeat: repeat-x;  padding:20px 5%;  margin: 0;  position: relative;  border: 1px solid rgba(216,216,216,0.8);}.control-group {margin-bottom: 15px;}.control-label {color: #405c60;display:block;line-height: 18px;font-weight: normal;font-size: 16px;display:inline-block;min-width: 80px;max-width: 80px;text-align: right;margin-top: 12px;vertical-align: top;}.controls {display: inline-block;vertical-align: top;w