横竖屏样式

方向:横屏/竖屏

结合CSS媒体查询,可以创建适应不同设备的方向(横屏landscape、竖屏portrait等)的布局。

语法:
orientation:portrait | landscape
portrait:指定输出设备中的页面可见区域高度大于或等于宽度

landscape: 除portrait值情况外,都是landsca

实例:

<style>
/*竖屏*/
@media only screen and (orientation:portrait ) {
}
/*横屏*/
@media only screen and (orientation:landscape) {
body *{ display:none;}
body{ }
body:after{ content:"请不要横屏预览!!!"}
}
</style>

时间: 2024-10-28 20:02:17

横竖屏样式的相关文章

更靠谱的横竖屏检测方法

参考链接:http://www.cnblogs.com/zhansingsong/p/5866692.html 前不久,做了一个H5项目,需要在横竖屏变化时,做一些处理.毫无疑问,需要使用orientationchange来监听横竖屏的变化. 方案一: // 监听 orientation changes window.addEventListener("orientationchange", function(event) { // 根据event.orientation|screen

Android实战技巧之二十四:横竖屏切换

这几年一直在做手机上和电视盒的App,几乎没有考虑过横竖屏切换的问题.电视盒好说,横屏不变,你要是给它设计个竖屏人家也没机会使:而手机上的应用就不好说了,有些界面你设计了横竖屏兼容可能是为了表示你的功能强大.但是按照惯例,或许也是设计师图省事,我们只是做一个方案.就像目前主流的App都只有竖屏一个模式,比如微信.京东和招商银行.我截了几张图表示一下. 但是像地图之类的应用,也许横屏会显示的更友好一些.请看腾讯地图的设计如下: 细心的你会发现,地图的横竖屏的样式几乎是一样的布局,调整起来还是比较容

iOS横竖屏的一些坑(持续更新)

最近在做视频类的App,遇到视频滚动播放的坑,紧接着就是横竖屏问题.之前太过天真不想做横竖屏配置.只是淡出的旋转视频View,但是分享什么的包括AlertView还是竖屏样式,项目着急上线(1周提交一次也是够了...人家审核都烦了估计)也就一直没改.昨天开始改才发现是一个深坑! 因为首页是滚动播放,不想做横屏适配,看了下目前主流App,搜狐做的貌似是最好的.具体想过如图 他们横屏转动的时候后面的tableView不动的,当初就是看了一眼就天真的以为只是转动个view,其实还是竖屏...但是 紧接

JS检测移动端横竖屏的代码

这篇文章主要介绍了JS检测移动端横竖屏的代码,需要的朋友可以参考一下 使用media来判断屏幕宽度遇到的问题: ios上当我旋转屏幕的时候可行,但是安卓机上没反应,横屏显示的还是我竖屏的样式. 查了一下资料,css3的media如果要在移动端有较好的显示效果,需要在页头加上这段代码 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-s

iOS 横竖屏切换(应对特殊需求)

iOS 中横竖屏切换的功能,在开发iOS app中总能遇到.以前看过几次,感觉简单,但是没有敲过代码实现,最近又碰到了,demo尝试了几种情况,这里就做下总结.注意 横屏两种情况是反的你知道吗? UIInterfaceOrientationLandscapeRight与UIInterfaceOrientationMaskLandscapeRight都代表横屏,Home键在右侧的情况:UIDeviceOrientationLandscapeLeft则是Home键在左侧. 一般情形 所有界面都支持横

Android-layout的横竖屏处理

横竖屏处理是开发应用是比较基础的一个要点,几乎都会用到.网上有一大堆的横竖屏切换的文章,但是翻了n页以后发现竟然清一色的是转载,所以不想浪费时间到这个上面,还是自己根据自己的需求与体会总结一下吧,也方便以后查阅 一.layout-land和layout-prot的区别与使用 默认情况下,创建的Android项目里只有一个layout文件夹,尽管这样也可以横竖屏切换用,但是某些布局横屏过后闲的格外的丑,如下图 横屏过后就显示的不全了,有时候看着比较纠结.所以需要在横屏的使用重新载入新的布局文件 解

css3完美解决手机横竖屏判断,让用户看邀请函更爽

html: <div id="cover1"></div> <p id="cover1w">亲,请竖屏观看本屏内容,谢谢^_^</p> css: /* 判断手机横竖屏  */ @media screen and (orientation:portrait) { /*  css[竖向定义样式]  */ #cover1{display: none;width: 100%;height: 100%;background-co

android 横竖屏先关操作

今天处理了点关于android横竖屏的效果,半天下来觉得这个横竖屏的相关操作还是有很多的,废话结束-------------- 首先看看最常见的横竖屏幕的控制,在清单文件中可以设置Activity是否支持横屏,要以什么样的方式展示(横屏.竖屏),常见的设置方式就是在Activity中加上 android:screenOrientation="XXX" ,这样就能限定该Activity是否的展示方式. <activity android:name=".ui.Details

最新res索引讲解(drawable、layout、values等目录的分辨率和layout的横竖屏,以及values的多语言)

最新res目录讲解(drawable.layout.values等目录的分辨率和layout的横竖屏,以及values的多语言) 我们建好一个android 的项目后,默认的res下面 有drawable.layout.values等目录 1.drawable目录相关 启开一个新的Android专案后在res资料夹内会有 drawable-hdpidrawable-mdpi drawable-ldpi drawable-xhdpi drawable-xxhdpi 三个目录,所定义的dpi皆不同