Bootstrap横屏后竖屏

悠悠 2021-05-22 20:36 590阅读 0赞

在写页面的首页时候，竖屏显示正常，切换横屏，再切换竖屏。如图  
1.竖屏  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FkbWluUHdk_size_16_color_FFFFFF_t_70]  
2.横屏  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FkbWluUHdk_size_16_color_FFFFFF_t_70 1]  
3.横屏后竖屏  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FkbWluUHdk_size_16_color_FFFFFF_t_70 2]  
这就比较尴尬，但是当刷新的时候就显示正常了。在页面刷新的时候不可以影响其他， 所以我在这用到了 localStorage 缓存的方法。(localStorage 介绍在这里[传送门][Link 1])

<script>
              window.addEventListener("onorientationchange" in window ? "orientationchange" : "resize", hengshuping, false);
                $(function(){  //页面加载时检查
                    hengshuping();
                });
        
                function hengshuping() {
                    if (window.orientation == 0 || window.orientation == 180) {
                            var shu=window.localStorage.getItem('name')
                            if(shu=='a'){
                                    window.location.reload();
                                    window.localStorage.setItem('name','b');
                            }
                            //alert('竖屏')
                            orientation = 'portrait';
                            return false;
                        }
                        else if (window.orientation == 90 || window.orientation == -90) {
                            window.localStorage.setItem('name','a');
                            //alert('横屏')
                            orientation = 'landscape';
                            return false;
                        }
                    }    
        </script>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FkbWluUHdk_size_16_color_FFFFFF_t_70]: /images/20210522/9690f20e65e34c5db45bb619f1b33f83.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FkbWluUHdk_size_16_color_FFFFFF_t_70 1]: /images/20210522/141c5bc8ae2c41febd133bee6b18808d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FkbWluUHdk_size_16_color_FFFFFF_t_70 2]: /images/20210522/42f3c40d8157461bb2d0ee850952c71b.png
[Link 1]: https://www.runoob.com/jsref/prop-win-localstorage.html

发表评论取消回复

表情：

评论列表（有 0 条评论，590人围观）

还没有评论，来说两句吧...

相关阅读

相关 Android判断横屏竖屏代码

// 判断Android当前的屏幕是横屏还是竖屏。横竖屏判断 if (this.getResources().getConfiguration().orie

系统管理员/ 2023年10月16日 22:14/ 0 赞/ 62 阅读

相关竖屏java转横屏_Android屏幕旋转之横屏竖屏切换的实现

刚实现了App内手机横/竖放置时，屏幕横/竖屏的切换。记录一下中间需要的关键信息和实现过程。开门见山的说，实现屏幕自动/手动旋转的方式有两种：一种是在工程的代码中定义，

布满荆棘的人生/ 2022年11月06日 04:59/ 0 赞/ 412 阅读

相关 ios开发-固定横/竖屏

在ios开发过程中，有的应用需要固定横/竖屏，即只能显示横屏或者竖屏。比如我现在正在做的学院网站客户端，就需要固定竖屏。下面介绍下固定横/竖屏的方法。 1

港控/mmm°/ 2022年09月17日 07:27/ 0 赞/ 400 阅读

相关 android锁定横屏或竖屏

1.Xml锁定横屏或竖屏在没有设置屏幕方向的情况下会默认设置为：android:screenOrientation="unspecified"、即未指明屏幕方向、属性取

谁践踏了优雅/ 2022年07月12日 04:19/ 0 赞/ 729 阅读

相关 android4.0强制横屏竖屏

方法一：android4.0/frameworks/base/services/[Java][]/com/[Android][]/server/wm/WindowManager

刺骨的言语ヽ痛彻心扉/ 2022年06月15日 01:49/ 0 赞/ 320 阅读

相关 android 屏幕旋转（横屏、竖屏、反向横屏、反向竖屏）的实现

android 屏幕旋转（横屏、竖屏、反向横屏、反向竖屏）的实现前言：根据屏幕的旋转自动实现应用界面旋转，横屏、竖屏、反向横屏、反向竖屏。布局文件 <?x

迈不过友情╰/ 2022年06月06日 05:13/ 0 赞/ 903 阅读

相关移动端浏览器横屏、竖屏样式

在做移动端的时候，我们会遇到横竖屏样式该如何使用，我们可以定义两个最顶层的父类class，然后根据css的后代选择器来定义相应的样式，但我们今天要说的是利用媒体查询来做。关

- 日理万妓/ 2022年05月26日 01:09/ 0 赞/ 313 阅读

相关 Activity横竖屏切换时先看到横屏/竖屏再变换回竖屏/横屏

因为公司APP上的一个Bug遇到一个问题，跟了下这个问题，稍微记录一下。需求：当App从后台回到前台的时候，要弹出一个广告页Activity A ，而广告页希望是竖屏显示的

一时失言乱红尘/ 2022年04月22日 14:44/ 0 赞/ 448 阅读

相关（转）ANDROID强制锁定竖屏_APP固定设置竖屏或横屏

1、XML锁定横屏或竖屏在没有设置屏幕方向的情况下会默认设置为：android:screenOrientation="unspecified"、即未指明屏幕方向、属性取

淩亂°似流年/ 2022年01月30日 09:27/ 0 赞/ 2213 阅读

相关 Bootstrap横屏后竖屏

在写页面的首页时候，竖屏显示正常，切换横屏，再切换竖屏。如图 1.竖屏 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_

悠悠/ 2021年05月22日 20:36/ 0 赞/ 591 阅读