iPad CSS控制横屏竖屏布局（LandscapePortrait Modes）

概述iPad CSS控制横屏/竖屏布局（Landscape/Portrait Modes） 使用不同的CSS控制布局 iPad\iPad2的分辨率是1024*768，同时iPad也支持横屏和竖屏。为了让内容更好的展现给用户，我们就需要在竖屏和横屏的布局上做不同的处理。 @media only screen and (max-device-width: 1024px) and (orientation: iPad CSS控制横屏/竖屏布局（Landscape/Portrait Modes）

使用不同的CSS控制布局

iPad\iPad2的分辨率是1024*768，同时iPad也支持横屏和竖屏。为了让内容更好的展现给用户，我们就需要在竖屏和横屏的布局上做不同的处理。

@media only screen and (max-device-wIDth: 1024px) and (orIEntation:portrait) {.landscape { display: none; }}@media only screen and (max-device-wIDth: 1024px) and (orIEntation:landscape) {.portrait { display: none; }}/* iPads (portrait and landscape) ----------- */@media only screenand (min-device-wIDth : 768px)and (max-device-wIDth : 1024px) {/* Styles */}/* iPads (landscape) ----------- */@media only screenand (min-device-wIDth : 768px)and (max-device-wIDth : 1024px)and (orIEntation : landscape) {/* Styles */}/* iPads (portrait) ----------- */@media only screenand (min-device-wIDth : 768px)and (max-device-wIDth : 1024px)and (orIEntation : portrait) {/* Styles */}

通过上边样式的不同组合，即可实现对ipad中页面布局的控制。

使用媒体查询中的orIEntation属性来区别横屏和竖屏

<link rel="stylesheet" media="screen and (orIEntation:portrait)" href="portrait.CSS" /><link rel="stylesheet" media="screen and (orIEntation:landscape)" href="landscape.CSS" />

补1：通过Js前端识别是否是iPad设备

if(navigator.userAgent.match(/iPad/i)){   do something;}

补2：通过PHP后端识别是否是iPad设备

$isIPad = preg_match('/ipad/i',trim($_SERVER['http_USER_AGENT']));if ($isIPad) $device="ipad";else $device="not-ipad";

总结

以上是内存溢出为你收集整理的iPad CSS控制横屏/竖屏布局（Landscape/Portrait Modes）全部内容，希望文章能够帮你解决iPad CSS控制横屏/竖屏布局（Landscape/Portrait Modes）所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。