横屏_屏横竖 - CSDN
  • 在移动端中我们经常碰到横屏竖屏的问题,那么如何去判断或者针对横屏、竖屏来写不同的代码呢。 首先在head中加入如下代码: <meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-...

    前言

    在移动端中我们经常碰到横屏竖屏的问题,那么如何去判断或者针对横屏、竖屏来写不同的代码呢。
    首先在head中加入如下代码:

    <meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    

    一、页面横屏

    1、CSS判断横屏竖屏

    1.1 写在同一个CSS文件中

    @media screen and (orientation: portrait) {
      /*竖屏 css*/
    } 
    @media screen and (orientation: landscape) {
      /*横屏 css*/
    }
    

    1.2 分开写在2个CSS文件中

    竖屏引用方式

    <link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css">
    

    横屏引用方式

    <link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css">
    

    2、JS判断横屏竖屏

    //判断手机横竖屏状态:
    window.addEventListener("onorientationchange" in window ? "orientationchange" : "resize", function() {
        if (window.orientation === 180 || window.orientation === 0) {
            alert('竖屏状态!');
        }
        if (window.orientation === 90 || window.orientation === -90 ){
            alert('横屏状态!');
        } 
    }, false);
    //移动端的浏览器一般都支持window.orientation这个参数,通过这个参数可以判断出手机是处在横屏还是竖屏状态。
    

    二、页面强制横屏显示

    有这个需求这个是因为客户端将手机横屏的功能屏蔽掉了,所以只能强制将页面横屏显示了

    以下是我的示例结构

    <div class="horizontal-main">
    	horizontal-main
    </div>
    

    css:

    .horizontal-main {
        background: linear-gradient(168deg, #f4dcef, #feead1);
        transform: rotate(90deg);
        transform-origin: 50% 50%;
        top: 146px;
        width: 667px;
        left: -146px;
        height: 375px;
        overflow-x: hidden;
        overflow-y: auto;
    }
    

    js:

    $(function(){
        var width = document.documentElement.scrollWidth;
        var height =  document.documentElement.scrollHeight;
        if( width < height ){
            $horiM =  $('.horizontal-main');
            $horiM.width(height);
            $horiM.height(width);
            $horiM.css('top',  (height-width)/2 );
            $horiM.css('left',  0-(height-width)/2 );
        } 
    })
    

    注意:这个方法只适合一屏展示的页面,不适合带有滚动条的页面。

    展开全文
  • 随着公司知识付费业务的发展,产品发现横屏展示内容的效果和体验都要比竖屏要来的好。我也感觉确实是这样的~。刚接到这个需求的时候,稍微想了一下,横屏这还不简单直接把整个页面旋转90度,不就完事了?结果真正...

    前言

    随着公司知识付费业务的发展,产品发现横屏展示内容的效果和体验都要比竖屏要来的好。我也感觉确实是这样的~。刚接到这个需求的时候,稍微想了一下,横屏这还不简单直接把整个页面旋转90度,不就完事了?结果真正开发的过程中发现并没有这么简单。比如屏幕横过来手势滑动的方向没有变过来等等!于是尝试去百度了一下最终并没有搜到满意的答案。后来决定自己摸索一下,下面是我开发过程中总结了一套做法,有更好的做好的同学也可以分享指正。

    效果图

    首先给大家看看效果图

    效果图一:

    效果图二:
    效果图三:

    看上去还是挺高大上的吧~,不过这效果图是针对app原生设计的,实际H5页面在微信里面访问还会有标题栏和底部返回栏,如下图h5实际展示效果(android):

    大家可以进去先体验一下(用微信访问),项目地址 m.ngmm365.com/mathbox/ind… 页面加载完毕之后,点击试学按钮即可进入横屏页面。

    项目需求及分析

    项目需求

    1、需求一:效果图一的星球要能支持左右滑动,滑动过程中还要能支持3D(远近缩放)的效果

    2、需求二:效果图二会有多节课需要能支持左右滑动

    3、需求三:效果图三内容要刚好占一屏

    分析

    1、分析需求一:星球切换部分使用swiper来实现。

    2、分析需求二:好像没什么难的,使用系统默认的滚动条就可以支持滚动了。

    3、分析需求三:嗯~,占一屏还不简单!直接按效果图尺寸写就好了。

    实践总结

    公司使用的是vue技术栈,所以下面的组件也是基于vue来写的。懂了原理我相信不管用什么框架去实现都不会有太大问题,所以不懂vue的同学也不用慌。

    问题及解决方案

    1、现在首先要做的第一件事情就是怎样先让页面横过来?

    h5没有横屏属性那只能通过旋转页面的元素来达到横屏的效果了transform: rotate(90deg);,所以我们要首先要有一个横屏容器组件。然后把对应页面的内容都放在这个容器里面页面是不是就横过来了?

    横屏容器组件代码如下:

    <template>
        <section v-horizontal-screen @touchmove.prevent>
            <!-- 页面具体内容 -->
            <slot></slot>
        </section>
    </template>
    <script>
    export default {
    	directives: {
            'horizontal-screen': {
                bind(el, binding, vnode){
                    let self = vnode.context;
                    
                    function reset(init){
                        
                        let width = document.documentElement.clientWidth,
                            height = document.documentElement.clientHeight;
                        //在竖屏状态我们通过添加transform:rotate(90deg),来让这个页面横过来
                        if(window.orientation == null || window.orientation === 180 || window.orientation === 0){//竖屏状态
                            el.style.webkitTransform = el.style.transform = `rotate(90deg)`;
                            el.style.width = `${height}px`;
                            el.style.height = `${width}px`;
                            el.style.webkitTransformOrigin = el.style.transformOrigin = `${width / 2}px center`;
                            //如果已经处于横屏状态就不做其他处理了
                        }else if(window.orientation === 90 || window.orientation === -90){//横屏状态
                            el.style.webkitTransform = el.style.transform = `rotate(0)`;
                            el.style.width = `${width}px`;
                            el.style.height = `${height}px`;
                        }
                    }
                    reset(true);
    
                    let timer = null;
                    el.fn = function(e) {
                        clearTimeout(timer);
                        timer = setTimeout(reset, 300);
                    }
                    
                    window.addEventListener('resize', el.fn, false);
    
                    if("onorientationchange" in window){
                        window.addEventListener('orientationchange', el.fn, false);
                    }
                },
                unbind(el, binding, vnode){
                    window.removeEventListener('resize', el.fn, false);
                    window.removeEventListener('orientationchange', el.fn, false);
                }
            },
        }
    }
    </script>
    复制代码

    现在页面已经横过来,接下来先让星球能够左右切换吧。是不是直接加入swiper插件就可以了?

    尝试引入swiper插件,然后运行起来的时候会发现,手势反了,上下滑动的时候内容才会左右滑动。因为现在我们只是把页面横过来了,x轴和y轴并没有变。当我们上下滑动的时候实际上改变的是x轴,也就是正常页面的左右滑动。带着好奇心查了一下swiper的api看看是否有支持这种操作参数。结果没有查到,只好自己尝试去修改源码了。下面是修改代码后的部分截图:

    增加了一个参数isReverse,如果为true则x轴和y轴反一反。当然isReverse还要判断一下特殊情况比如本来app就已经横屏了其实就没必要x轴y轴互反了。这样我们的内容又可以正常跟着手指方向滑动了。

    前面暂定需求二的滚动方式采用默认滚动条来解决,结果实现出来之后发现手指滑动方向也是反。原生的手势反了,改怎么调整呢?网上查了一通没有找到答案,关键这问题也不是很好描述!因为之前有使用过iscroll,可以模拟系统滚动条的效果。尝试加入到代码中,发现和swiper一样也会出现手指滑动方向反的情况。最后也只能自己去源码中增加一个参数了。整体对比iscroll改动的代码要比swiper少的多。只需要改一个地方就可以了,截图如下:

    需求一和需求二都解决了,接下来来解决“最简单”的第三个需求。其实按照设想不用做任何其它操作,只需要按照效果图的尺寸写就好了。

    页面写好了,在电脑上跑也没什么问题。决定部署到测试环境用手机跑一下看看。结果发现右侧内容超出屏幕范围了。是因为在微信中有标题栏和底部栏,导致内容超出了屏幕范围。联想一下其实在不同长宽比的手机上 其实即使不存在标题栏和底部栏 其实也会有类似情况。这该怎么解决呢?最后决定在横屏容器组件内部再加入一个自动缩放组件,最后页面的框架图长下面这样。当然自动缩放组件只在需要的地方加入。

    接下来一起看看比例缩放容器的代码吧。

    <template>
    	<div class="scale-wrap" :style="scaleWrapStyle">
    
    		<slot></slot>
    
    	</div>
    </template>
    <script>
    //这块宽高比例根据效果图来设置
    const DesignWidth = 375;
    const DesignHeight = 667;
    const DesignRatio = DesignWidth / DesignHeight;
    
    function getScale(){
    
        let width = document.documentElement.clientWidth,
            height = document.documentElement.clientHeight;
    
        if(window.orientation == null || window.orientation === 180 || window.orientation === 0){//竖屏状态
        	
        }else {
        	[width, height] = [height, width];
        }
    
        let ratio = width / height;
    
        let scale;
    
        //通过计算实际手机宽高比和效果图的宽高比得出最终的所让比例
        if(ratio > DesignRatio){
        	scale = height / (width / DesignRatio);
        }else if(ratio < DesignRatio){
        	scale = width / (height * DesignRatio);
        }else{
        	scale = 1;
        }
    
        return scale;
    
    }
    
    export default {
        data(){
            return {
            
            }
        },
        computed: {
            scaleWrapStyle(){
                let scale = getScale();
                let scaleStr = `scale(${scale})`;
                return { 'transform': scaleStr, '-webkit-transform': scaleStr };
            }
        },
    }
    </script>
    <style lang="less" scoped>
    .scale-wrap{
    	width: 100%;
    	height:100%;
    	display: flex;
    	transform-origin: left center;
    }
    </style>
    复制代码

    到此为止我们已经实现了对横屏需求处理的一套方案~

    【当然如果你遇到前面这些方案无法解决的横屏问题也可以发出来讨论一下。看看有没有好的办法去解决。】

    最后如果文档对你有帮助,就给个赞吧~

    相关代码

    github.com/taoxhsmile/…

    署名

    by:Tao

    转载于:https://juejin.im/post/5be2403df265da616b102e23

    展开全文
  • h5如何设置左右横屏显示  h5开发手机端如何设置横屏竖屏。   实现代码: plus.screen.lockOrientation("landscape");//锁定横屏 左右旋转 默认不会还原  ...

    h5如何设置左右横屏显示

          h5开发手机端如何设置横屏竖屏。

     

    实现代码:

    				plus.screen.lockOrientation("landscape");//锁定横屏 左右旋转 默认不会还原
    

     

    展开全文
  • 1.有的时候做H5的页面的时候会出现要关注横屏的情况。但是如果是用百分比的话横屏容器就会被拉的特别宽。里面的元素标签就会飘的哪里都是。此时就可以使用css3的媒体查询功能来设置布局。 @media all and ...

    1.有的时候做H5的页面的时候会出现要关注横屏的情况。但是如果是用百分比的话横屏容器就会被拉的特别宽。里面的元素标签就会飘的哪里都是。此时就可以使用css3的媒体查询功能来设置布局。

    @media all and (orientation : landscape) { 

    h2{color:red;}/*横屏时字体红色*/

    2.这个也有一个bug。就是安卓手机的兼容性不是很好。所以亲测的解决方法是容器的宽度不要设置为百分之百。如果一旦设置为百分之百。页面里如果有input输入按钮,键盘一弹出来。竖屏的时候整个页面就会被拉长。最好设置百分之六十,并且要居中显示,用margin:0 ,auto就可以了。如果是用了定位。那就用transform来设置居中即可。

    展开全文
  • 横屏app如何设置

    2019-03-04 15:24:17
    plist中的两个关键key Supported interface orientations Supported interface orientations (iPad) 把这两个可以对应的值设置为横屏
  • 本文主要介绍Android Activity横屏、竖屏、全屏设置,请看文章!
  • div id="content"> p>谁说html5不能横屏的... p>我就是要横屏。。。p> p>要横屏。。。p> p>横屏。。。p> p>屏。。。p> p>图片也是可以的。img src="http://img001.photo.21cn.com/photos/album/20120904/o/6A7
  • ios 强制横屏大总结

    2017-04-01 12:12:04
    整个项目是竖屏的,不能横屏,但是有个播放界面必须要横屏于是就开始找各种横屏的方法,最后在手机上好使了,但是在pad上横屏启动的时候界面是横屏显示,很是苦恼,就又开始了漫长的找资料,直接上代码1,配置plist...
  • 背景最近公司要开发一个移动端的类网页游戏: 长按按钮有个自行车一直骑行,碰到某个国家的地标就弹出该国的相应say hello的tip,要求横屏显示,不能竖屏。然而当用户竖屏打开时,而且没开启手机里的横屏模式,还要逼...
  • 很显然,如果用户手机允许屏幕旋转,那么在横屏的情况下,页面就变得很恶心了.因此我们需要进行一个处理,来判断浏览器是否是横屏,在横屏的情况下,要使用高度值来计算html的font-size.代码因为项目引入
  • 最近在使用mui做一个h5+APP,遇到了横屏页面返回后依旧横屏不能切换回竖屏的问题,百度了很久后得到了解决方案,记录之,原文地址:点击打开链接。mui.plusReady(function() { plus.screen.lockOrientation("...
  • 默认情况下,app会随着手机方向的改变进行屏幕切换,手机横向摆放的时候,app屏幕就会切换到横屏,反之切换到竖屏,但是app是一般都是根据竖屏设计的,一旦切换到横屏,布局就会乱掉,所以没有考虑横屏设计的app一般...
  • android横竖判断

    2019-07-10 15:46:42
    有的需求只需要判断横竖屏,而有的需求则需要具体的是左横屏还是竖屏还是又横屏,比如前面说的拍照。 那么就需要到2种横竖屏的获取方式: (1)只获取横竖屏的状态: //获取设置的配置信息 Configuration ...
  • 刚实现了App内手机/竖放置时,屏幕/竖的切换。记录一下中间需要的关键信息和实现过程。 开门见山的说,实现屏幕自动/手动旋转的方式有两种: 一种是在工程的代码中定义,这种方式在横竖切换时执行的操作...
  • 移动端手机网页强制横屏或全屏模仿横评的js加css3方法最近项目有电子合同方面的开发,需要电子签字,(用的jsignature插件,如果有空以后单独写个使用心得)。在手机小屏幕上签字,全屏横屏才是最好的体验。用户竖屏...
  • iOS-强制横屏大总结

    2018-10-30 15:09:23
    整个项目是竖屏的,不能横屏,但是有个播放界面必须要横屏于是就开始找各种横屏的方法,最后在手机上好使了,但是在pad上横屏启动的时候界面是横屏显示,很是苦恼,就又开始了漫长的找资料,直接上代码 1、配置...
  • 在我们的iOS项目中,时常会碰到某个界面需要支持横竖屏切换,比如优酷播放视频的时候,从竖屏切换到了横屏,在比如某个查看pdf文件的界面支持横竖屏转换....当然,有的项目需求也可能是某个界面进来就是横屏的(这也叫做...
  • 这些App若是允许切换横屏操作,而用户的手机又设置了允许自动旋转,那么用户在使用这些App的时候很可能会经常碰到横屏的情况,结果不言而知,App给用户的体验就有了折扣。 所以,碰到这种情况下,不妨根据设计时...
  • 有时我们的APP并没有适配横屏的需求,但是在个别视频播放界面,我们需要在播放视频的时候横屏,退出全屏的时候不能横屏,但是有时候并没有原生API并没有给出解决方案。 当其他界面不支持横屏时: 这个解决方法比较...
  • 在经过横屏转竖屏时,发现触摸屏仍然是横屏时候的触摸点。横屏时触摸屏正常使用,竖屏时不正常。 解决:需要将 触摸屏进行旋转 通过 input。 通过 xrandr -o right 旋转后触摸屏不正常。  旋转触摸的坐标轴, ...
1 2 3 4 5 ... 20
收藏数 129,368
精华内容 51,747
关键字:

横屏