大佬教程收集整理的这篇文章主要介绍了iPad CSS控制横屏/竖屏布局(Landscape/Portrait Modes),大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
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 screen and (min-device-width : 768pX) and (max-device-width : 1024pX) { /* Styles */ } /* iPads (landscapE) ----------- */ @media only screen and (min-device-width : 768pX) and (max-device-width : 1024pX) and (orientation : landscapE) { /* Styles */ } /* iPads (porTrait) ----------- */ @media only screen and (min-device-width : 768pX) and (max-device-width : 1024pX) and (orientation : porTrait) { /* Styles */ }
通过上边样式的不同组合,即可实现对ipad中页面布局的控制。
<link rel="stylesheet" media="screen and (orientation:porTrait)" href="porTrait.css" /> <link rel="stylesheet" media="screen and (orientation:landscapE)" href="landscape.css" />
if(navigator.userAgent.match(/iPad/i)){ do something; }
$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)所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。