横屏_横屏变竖屏 - CSDN
精华内容
参与话题
  • 移动端手机网页强制横屏或全屏模仿横评的js加css3方法最近项目有电子合同方面的开发,需要电子签字,(用的jsignature插件,如果有空以后单独写个使用心得)。在手机小屏幕上签字,全屏横屏才是最好的体验。用户竖屏...

    最近项目有电子合同方面的开发,需要电子签字,(用的jsignature插件,如果有空以后单独写个使用心得)。在手机小屏幕上签字,全屏横屏才是最好的体验。用户竖屏打开页面时要去签字,提示用户把手机横过来,这样体验太low了,程序员要考虑能用技术解决的就不要去劳烦用户(免得用户烦了回头打电话咬你)。


    先来几个检测屏幕方向的方法:

    //判断屏幕方向
    if(window.orientation==90||window.orientation==-90){
        alert("横屏状态!")
    }
    
    //监听屏幕方向
    window.onorientationchange = function(){ 
        switch(window.orientation){ 
            case -90: 
            case 90: 
                alert("横屏:" + window.orientation);
            case 0: 
            case 180: 
                 alert("竖屏:" + window.orientation);
            break; 
        } 
    } 
    
    <!--css媒介查询判断-->
    @media (orientation: portrait) { } 竖屏 
    @media (orientation: landscape) { } 横屏
    

    进入网页检测是否横屏状态,不是就给canvas加样式:

    transform: rotate(90deg);
    

    最初想的是把jsignature的canvas画布用css3transform横过来就可以了,谁想到,画布横是过来了,touch相关的手势还是竖的(签字啊,笔画不跟手怎么签)。如果是普通项目仅仅是显示的话,上面的方法已经够用了。

    还好这个项目是网页内嵌app中,app有方法强制网页横屏,改了改页面,交上去了。(插件横屏未解决,待续)

    2019年3月18日更新:

    目前没有找到可以支持这个想法的方法,所以不如转变下思路
    现在手机屏幕越来越大,页面做横竖两版样式,竖的时候提示用户横屏签字效果更佳
    竖屏
    横屏

    展开全文
  • 移动端页面横屏和强制横屏适配

    千次阅读 2019-06-19 15:48:51
    在移动端中我们经常碰到横屏竖屏的问题,那么如何去判断或者针对横屏、竖屏来写不同的代码呢。 首先在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 );
        } 
    })
    

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

    展开全文
  • 移动端手机横屏提示

    千次阅读 2015-06-21 18:23:23
    【项目地址】: http://dwz.cn/RYgq7【手机二维码】:【效果】:... 为了更好的体验,请使用竖浏览 /* 样式放在结尾,防止 base64 图片造成拥塞 */ @keyframes rotation { 10% { transform: rotate(90deg)

    【项目地址】: http://dwz.cn/RYgq7

    【手机二维码】:这里写图片描述

    【效果】:

    
    
    【代码】
    
    为了更好的体验,请使用竖屏浏览


    /* 样式放在结尾,防止 base64 图片造成拥塞 */
    @keyframes rotation {
    10% {
    transform: rotate(90deg);
    -webkit-transform: rotate(90deg)
    }
    50% {
    transform: rotate(0);
    -webkit-transform: rotate(0)
    }
    60% {
    transform: rotate(0);
    -webkit-transform: rotate(0)
    }
    90% {
    transform: rotate(90deg);
    -webkit-transform: rotate(90deg)
    }
    100% {
    transform: rotate(90deg);
    -webkit-transform: rotate(90deg)
    }
    }

    @-webkit-keyframes rotation {
        10% {
            transform: rotate(90deg);
            -webkit-transform: rotate(90deg)
        }
        50% {
            transform: rotate(0);
            -webkit-transform: rotate(0)
        }
        60% {
            transform: rotate(0);
            -webkit-transform: rotate(0)
        }
        90% {
            transform: rotate(90deg);
            -webkit-transform: rotate(90deg)
        }
        100% {
            transform: rotate(90deg);
            -webkit-transform: rotate(90deg)
        }
    }
    
    .mod-orient-layer {
        display: none;
        position: fixed;
        height: 100%;
        width: 100%;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        background: #000;
        z-index: 9997
    }
    
    .mod-orient-layer__content {
        position: absolute;
        width: 100%;
        top: 45%;
        margin-top: -75px;
        text-align: center
    }
    
    .mod-orient-layer__icon-orient {
        display: inline-block;
        width: 67px;
        height: 109px;
        background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIYAAADaCAMAAABU68ovAAAAXVBMVEUAAAD29vbx8fHx8fH5+fn29vby8vL5+fn39/f6+vrx8fH+/v709PTx8fH39/fx8fH///+WLTLGAAAAHXRSTlMAIpML+gb4ZhHWn1c2gvHBvq1uKJcC6k8b187lQ9yhhboAAAQYSURBVHja7d3blpowFIDhTUIAOchZDkre/zE7ycySrbUUpsRN2/1fzO18KzEqxEVgTiZNfgmmtxRc8iaR8HNe8x4BtjQePKayYCIoyBSgvNNE1AkNSHqZyLqk97EgUCCHBzZ5mkg7ScvIJuIyOyXBRFxgpqWZyGsAZLB1KjsJi8nutHU4JCRbFRH8tmirI9k8Jx2sqNs8K/m0LQkrktO2crgcgXGB4AiTEsB0hJfo9MGgX7CGcYiYwQxmMOOvZwRhBG8tCoMXjBDeXvWCEcHbi14wgCBmMIMZzGAGM5jxETNwzMAxA8cMHDNwzMAxA8cMHDNwzMAxA8cMHDNwzMAxY6E2rUQxnH2tz9cirlJFwFBJedaPnUv0M7++egPDE8iAJcIDmxwH5wwv9vUviw2kLbVO3TJU5uul/EyB0FoLp4x60PdGUd3qPurrWyjGGTc05u+1dcgI7/+tCCPARWGhH7o5Y7RCf+bH9ctXLp6v2BVDxfqz0oPXeSVaNtINo/1SXDv4dck8IIkbhtC2ol+iouEonTBCbYvVMnXOjxww6s/RFrBUpXHh/gw1rHj5d/qhYn9Gpk2FWh6xRBRX5Oj3Znh2Sq49/L6+y8pB26q9GbE2dbA2mVbx6I+7MfBglLCttm73ZQi7AD3iL4HqjFYJHSPRppqaUaJ3ATpGa+ckpGak2hRRMyqjGMkvl+xyFeSMwjAqcsZgGDdyhl0oNTnDN4yenJGZFGxNChP5/Y3efh6SM2rDOJMzboYxkDMqwyjIGcIw6F+io2FU1IxIm1JqRmgXSkvNKNCXeTpGrU0JNSO2c6LIGPgCS8AuDHz9ta0SXWDtxoDRH+MqlbC2Dt2G2JFRadtQZt2qq/orGowdGb2euxYiqWEpVWhTBnszoNAPdStuQwxqf0aocdWKW4Z+DfszIh8pxJqbuCE4YAC+4bm0evtipjpgJHeFnyyt1Ku2xa0bhjxr27p75rECNwyI9ZwvXkHq+7aTaMEV44YYy/spfgjgjNHaWW+GeUhGEX7tLlVinIFDDSgnOwhi1V6bU0b6tVS9eAERe863g4dRrtiHdc6o+nn5vtyVVgR79Cqt4uL6gfHPQyGqtP2vf7HADGbcYwaOGThm4JiBYwaOGThm4JiBYwaOGThm4JiBYwaOGThm4JiBYwaOGThm4JjhtOM+J/AgT008yDMkN/dPP9hzS8zAMQN3OEYeekp5YU7KOKXwVXqiY+QS7smcinGKABWdiBgpPJTSMHJ4KidhhPBUSMLw4CmPhKHgKUXCkHsygum71ftNSgCX6bsl8FQyfbcL5EdYsDk0R3j7aiA5wpt5AjKg/2gLJEBD/0Hf2OOf/vRrj6z/7GtP4B3nMKyjHA12kIPSjnJs3FEO0TvKkYJHOWCR+rjJH0Vn6fI5PjNbAAAAAElFTkSuQmCC');
        transform: rotate(90deg);
        -webkit-transform: rotate(90deg);
        -webkit-animation: rotation infinite 1.5s ease-in-out;
        animation: rotation infinite 1.5s ease-in-out;
        -webkit-background-size: 67px;
        background-size: 67px
    }
    
    .mod-orient-layer__desc {
        margin-top: 20px;
        font-size: 15px;
        color: #fff
    }
    
    .mod-orient-layer__desc {
        margin-top: 20px;
        font-size: 15px;
        color: #fff
    }
    
    var orientLayer = document.getElementById("orientLayer"); //判断横屏竖屏 function checkDirect() { if (document.documentElement.clientHeight >= document.documentElement.clientWidth) { return "portrait"; } else { return "landscape"; } } //显示屏幕方向提示浮层 function orientNotice() { var orient = checkDirect(); if (orient == "portrait") { orientLayer.style.display = "none"; } else { orientLayer.style.display = "block"; } } function init() { orientNotice(); window.addEventListener("onorientationchange" in window ? "orientationchange" : "resize", function () { setTimeout(orientNotice, 200); }) } init();

    “`

    展开全文
  • 移动端如何让页面强制横屏

    千次阅读 2018-06-22 18:17:52
    为了更好的用户体验,当用户竖打开时我们需要将手机页面的内容过来,效果如下所示: 好了,现在我的项目中html结构如下:&lt;body&gt; &lt;div id="main"&gt;&lt;/div&gt;...

         最近开发微信公众号的时候遇到一个需求,就是在手机页面上有许多ECharts图形展示。为了更好的用户体验,当用户竖屏打开时我们需要将手机页面的内容横过来,效果如下所示:

          

    好了,现在我的项目中html结构如下:

    1. <body>
    2.        <div id="main"></div>     //这是我的画布
    3. </body>

    我们利用transform将这个父容器在竖屏状态下整体顺时针旋转90º,这样就得到了一个横屏的状态。但是还不够,因为旋转元素的基点默认为本身的中心点。所以我们需要设置一下它的旋转中心为左上角,即transform-origin: 0% 0%;这样的话页面被“转出了屏幕”停留在屏幕的左侧,最后一步只需要将它往右平移一个屏幕的宽度就刚刚好(left:100vw)。请看示意图:


    完整代码如下:

    1. <style type="text/css">
    2.     body{
    3.               position:fixed;       //将body铺满整个屏幕
    4.               width: 100%;
    5.               height: 100%;
    6.               padding: 0;
    7.               margin: 0;
    8.               background-color:rgb(51, 51, 51);
    9.               overflow: hidden;
    10.       }
    11.       #main{    //注意这里:初始时候我们需要将这个div的长宽给设置一下(ps:宽度要大于高度)
    12.                   width:560px;
    13.                   height:320px;
    14.        }
    15.        @media screen and (orientation: portrait){     //竖屏状态下
    16.                     #main{  
    17.                                 position:absolute;
    18.                                 width: 100vh;
    19.                                 height: 100vw;
    20.                                 top: 0;
    21.                                 left: 100vw;
    22.                                 -webkit-transform:rotate(90deg);
    23.                                 -moz-transform: rotate(90deg);
    24.                                 -ms-transform: rotate(90deg);
    25.                                  transform:rotate(90deg);
    26.                                  transform-origin: 0% 0%;
    27.                                  }  
    28.           }
    29.           @media screen and (orientation: landscape) {        //横屏状态下
    30.                     #main {
    31.                                 position:absolute;
    32.                                 top:0;
    33.                                 left:0;
    34.                                 width: 100vw;
    35.                                 height: 100vh;
    36.                                 }
    37.             }
    38. </style>
    感谢阅读!如有遗漏之处欢迎指正。

    展开全文
  • 亲自验证可以让网页版移动端强制横屏,手机自动旋转也能适应,实现手机强制横屏
  • html 强制横屏

    千次阅读 2019-04-30 16:31:37
    超好用,大家可以在增加是否横屏判断
  • 作者:Yogi前言:有时候我们想让应用保持在一个状态:横屏或者竖屏。那么应该怎么做呢?方法1setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_PORTRAIT);//强制竖屏写在setContentView()之后即可方法2在...
  • Android判断当前是横屏或者竖屏

    万次阅读 2017-06-14 14:06:11
    Configuration mConfiguration = this.getResources().getConfiguration(); //获取设置的配置信息 int ori = mConfiguration.orientation; //获取屏幕方向 if (ori == mConfiguration.ORIENTATION_... //横屏 setRequ
  • Android模拟器横屏和竖屏的切换

    万次阅读 2012-07-16 13:47:31
    横屏:Ctrl+F11   竖屏:Ctrl+F12
  • JS 判断手机当前是横屏还是竖屏

    万次阅读 2018-08-06 17:16:57
    orientation官方文档 function rotate() { if (window.orientation == 180 || window.orientation == 0) { alert('竖') } if (window.orientation == 90 || window.orientation == -90) { ...
  • Android 模拟器横屏竖屏切换设置

    万次阅读 2014-01-16 12:41:58
    Android 模拟器横屏竖屏切换...摘要: Android 模拟器旋转,横屏、竖屏切换设置,android 横屏布局,android 横屏模式,android 模拟器,android 模拟器横屏,android 模拟...       Andr
  • android开发禁止横屏(所有activity)

    万次阅读 2016-11-28 10:58:06
    1,让你的所有Activity都继承一个BaseActivity,然后在BaseActivity的onCreate()方法中加上 setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_PORTRAIT);
  • ios 禁止横屏

    万次阅读 2013-08-20 09:16:17
    在AppDelegate中增加,这个方法可以禁止横屏 - (NSUInteger)application:(UIApplication *)application supportedInterfaceOrientationsForWindow:(UIWindow *)window   {   return ...
  • 微信小程序实现横屏展示

    万次阅读 2019-08-22 14:43:25
    先来看看横屏效果: 实现横屏只需要在page的json页设置"pageOrientation": "landscape" 这样就能横屏了,但要注意一点,竖屏切到横屏rpx单位不再适用,转换成px就可以了,标准情况下2rpx==1px ...
  • Android屏幕控制一:强制竖屏横屏

    万次阅读 2017-06-07 14:51:14
    默认情况下,app会随着手机方向的改变进行屏幕切换,手机横向摆放的时候,app屏幕就会切换到横屏,反之切换到竖屏,但是app是一般都是根据竖屏设计的,一旦切换到横屏,布局就会乱掉,所以没有考虑横屏设计的app一般...
  • iOS横屏应用的设置

    万次阅读 2013-05-20 21:02:03
    在有些画图类、游戏类应用中,需要限制APP仅支持横屏或仅支持竖屏,这就需要在程序中禁止支持其他两个方向。下面以横屏应用为例介绍一下如何进行设置(xcode版本为4.6.1): 首先,在项目的info.plist中去掉竖屏的两...
  • html5横、竖屏状态 以及禁止横屏

    万次阅读 2015-02-04 10:51:44
    window.addEventListener("onorientationchange" in window ? "orientationchange" : "resize", hengshuping, false); function hengshuping() { if (window.orientation == 90 || window.orientation ==
  • Android之设置横屏竖屏

    万次阅读 2015-06-24 10:08:32
    方案一:在AndroidManifest.xml中配置 在项目的AndroidManifest.xml中找到你所指定的activity中加上android:screenOrientation属性,它有以下几个参数: ..."landscape":横屏显示(宽比高要长) 
  • 模拟器中按command+方向键 就可以切换方向
  • 手机上如何让页面强制横屏

    万次阅读 2017-08-09 13:26:37
    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
1 2 3 4 5 ... 20
收藏数 124,297
精华内容 49,718
关键字:

横屏