iphone5 css样式,iPhone 5的CSS媒体查询

所有这些问题的答案上面列出，使用max-device-width或max-device-height媒体查询，遭受很强的错误：他们也瞄准很多其他受欢迎的移动设备(可能是不需要的，从未测试过，或将在未来上市)。

此查询将适用于任何具有较小屏幕的设备，并且可能会损坏您的设计。

结合类似的设备特定媒体查询(HTC，三星，iPod，Nexus ...)，这种做法将启动定时炸弹。对于debigging，这个想法可以让你的CSS成为一个不受控制的spagetti。你永远不能测试所有可能的设备。

请注意，只有媒体查询始终瞄准的iPhone5并没有别的是：

/* iPhone 5 Retina regardless of IOS version */

@media (device-height : 568px)

and (device-width : 320px)

and (-webkit-min-device-pixel-ratio: 2)

/* and (orientation : todo: you can add orientation or delete this comment)*/ {

/*IPhone 5 only CSS here*/

}

注意确切的宽度和高度，而不是最大宽度在这里检查。

现在有什么解决方案？如果你想要写一个网页，将寻找所有可能的设备好，最好的做法是使用降解

/*退化模式 我们正在检查屏幕宽度只有 肯定的是，这将改变从纵向转向景观*/

/*css for desktops here*/

@media (max-device-width: 1024px) {

/*IPad portrait AND netbooks, AND anything with smaller screen*/

/*make the design flexible if possible */

/*Structure your code thinking about all devices that go below*/

}

@media (max-device-width: 640px) {

/*Iphone portrait and smaller*/

}

@media (max-device-width: 540px) {

/*Smaller and smaller...*/

}

@media (max-device-width: 320px) {

/*IPhone portrait and smaller. You can probably stop on 320px*/

}

如果您的网站访问者的30％以上来自手机，把这个方案颠倒，提供移动优先的方法。在这种情况下使用min-device-width。这将加快移动浏览器的网页渲染速度。