李维亮_前端开发攻城狮 - ipad
type: channel
link: https://www.liweiliang.com/tag/ipad/
items: CSS3 Media Queries在iPhone4和iPad上的运用

CSS3 Media Queries在iPhone4和iPad上的运用
type: item
date: 2017-07-24T17:17:00+08:00
description: CSS3 Media Queries的介绍在本站上的介绍已有好几篇文章了，但自己碰到的问题与解决的文章还是相对的较少。同一个项目，为了实现iPhone和iPad横板与竖板的风格，让我还是头疼了一翻。一开始按照CSS3 Media Queries模板中的介绍来运用，虽然帮我解决了iPad的横板与竖板的风格渲染问题，但在iPhone4上还是存在问题的。后来结过网上的查找，总算是问题解决了，下面就来看看问题是如何解决的。在具体开始之前，先来看看他的源码： login form 用户名： 密码： 确认密码： 现在在iPhone4竖板是OK的，如下图所示但现在需求是，在iPhone4的横板以及iPad的横板与竖板下，也需要让表单居中显示：上图显示的是iPad竖板下的需求，横板下也需要类似的效果。需求明确，做法也是有思路的，首先我按照：CSS3 Media Queries模板中的模板在样式中增加了代码：/*iPad竖板*/ @media screen and (max-device-width: 768px) and (orientation: portrait) { form { margin: 0 25%; } } /*iPad横板*/ @media screen and (max-device-width: 1024px) and (orientation: landscape) { form { margin: 0 25%; } } /*iPhone4*/ @media only screen and (max-device-width: 480px), only screen and (-webkit-min-device-pixel-ratio: 2) { form { margin: 0 ; } .controls { width: 68%; } } 加上上面代码后在iPad下是正常了，而且不会有什么问题存在。但在iPhone4上依然存在一个怪异的现象：当你iPhone4加载页面是用横板加载，再旋转到竖板，不会存在任何问题，而且显示也是蛮正常的。但是初始加载页面是竖板，然后在旋转到横板，就有问题了，表单给放大了初步给我感觉就是放大了，但具体是不是因为这个原因，我也不太清楚，查找了一些资料，也尝试了无解决办法。最后也从横板竖板的思路出发查找资料，经过一试，给解决了，下面来看看这段代码：/* iPhone 4 竖板 */ @media only screen and (-webkit-min-device-pixel-ratio : 1.5) and (orientation:portrait), only screen and (min-device-pixel-ratio : 1.5) and (orientation:portrait){ form { margin:0; } .controls { width: 68%; } } /* iPhone 4 横板 */ @media only screen and (-webkit-min-device-pixel-ratio : 1.5) and (orientation:landscape), only screen and (min-device-pixel-ratio : 1.5) and (orientation:landscape){ form { margin:0 10%; } .controls { width: 68%; } } 这样一来就OK了。在iPhone4和iPad的横竖板下都能正常让表单居中显示。那么以后大家在iPhone4和iPad设备上，就可以按照横竖板来定样式了：1、iPhone4竖板@media only screen and (-webkit-min-device-pixel-ratio : 1.5) and (orientation:portrait), only screen and (min-device-pixel-ratio : 1.5) and (orientation:portrait){ /*你的样式写在这里*/ } 2、iPhone横板@media only screen and (-webkit-min-device-pixel-ratio : 1.5) and (orientation:landscape), only screen and (min-device-pixel-ratio : 1.5) and (orientation:landscape){ /*你的样式写在这里*/ } 3、iPad竖板@media screen and (max-device-width: 768px) and (orientat…