1、前言：

在项目中，我们常会遇见在手机端需要横屏观看的效果，而在pc端则默认切换到竖屏的样式。

　 或者是，UI提供的图是一个长图，但是在移动端我们需要让这个图在手机横屏时显示。

　 以上两个都需要我们实行一个框的自行切换方向，这个该如何实现呢？

2、解决方案

　  我们把所有需要切换方向的内容，都放在一个盒子里面，让这个最外面的盒子实现自动切换方向，里面的内容即可自动实现切换方向！

　 

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>实现pc端移动端自动切换屏幕方向</title>

    <style>

        html,

        body {

            width: 100%;

            height: 100%;

            position: relative;

            margin: 0;

            padding: 0;

        }

        .box {

            /* 注意,旋转方向后的box的宽高方向依然保持旋转前的宽高 ，所以旋转后的宽高和实际的宽高显示有区别*/

            width: 100vh;

            height: 100vw;

            position: absolute;

            top: 50%;

            left: 50%;

            -webkit-transform-origin: center center;

            transform-origin: center center;

            -webkit-transform: translate(-50%, -50%) rotate(90deg);

            transform: translate(-50%, -50%) rotate(90deg);

            -webkit-touch-callout: none;

        }

　　　　　/* orientation:landscape代表宽的长度大于高的长度 */

        @media (orientation:landscape) {

            .box {

                width: 100%;

                height: 100%;

                top: 0;

                left: 0;

                -webkit-transform: rotate(0);

                transform: rotate(0);

            }

        }

    </style>

</head>

<body>

    <div class="box">

        看我会不会自动切换方向~

    </div>

</body>

</html>

小结：

利用如上代码，即可实现box这个盒子，在pc端是横着的，而在手机端则是竖向显示；同时，放在box盒子里面的所有内容都会跟着进行相应的旋转！

关于H5从PC端切换到移动端，屏幕显示内容由横向转为竖向的研究！的更多相关文章

  1. PC端和移动APP端CSS样式初始化

    CSS样式初始化分为PC端和移动APP端 1.PC端:使用Normalize.css Normalize.css是一种CSS reset的替代方案. 我们创造normalize.css有下面这几个目的 ...

  2. pc端页面在移动端显示问题

    1.pc端页面在移动端显示,默认视口宽度是980px(也就是body宽度是980px),可通过meta标签设置为需要的尺寸,比如页面中元素最大宽度是1220px,则如下所示 <meta name ...

  3. (原) Jquery 判断设备是PC端，还是移动端

    判断设备是PC端,还是移动端 var ua = navigator.userAgent.toLocaleLowerCase(); var pf = navigator.platform.toLocal ...

  4. js判断页面在pc端打开还是移动端打开

    js判断页面在pc端打开还是移动端打开,分别跳转不同的index.html window.addEventListener('load', function() { // true为手机,false为 ...

  5. java 判断用户是PC端和还是APP端登陆

    java 判断用户是PC端和还是APP端登陆 public void getRequestHeader(HttpServletRequest request){ // 从浏览器获取请求头信息 Stri ...

  6. js如何判断用户是在pc端和还是移动端访问

    js如何判断用户是在pc端和还是移动端访问 来源:A5技术交流 作者:wofa 时间:2014-04-25收藏本页 最近一直在忙我们团队的项目“咖啡之翼”,在这个项目中,我们为移动平台提供了一个优秀的 ...

  7. 移动 H5（PC Web）前端性能优化指南

    原文地址https://zhuanlan.zhihu.com/p/25176904?utm_source=wechat_session&utm_medium=social&utm_me ...

  8. Web端测试和移动端测试的区别

    1.记录bug 在Web端可以通过系统自带的截图和QQ截图等方式来截取bug的图片,对于错误的地方可以用工具自带的标识来重点标记. 对于移动端设备可以用手机自带的截图工具来截图然后传到电脑上,个人一般 ...

  9. Web端测试和移动端测试

    之前参加的项目有涉及Web端测试和移动端测试,简单的记录下他们之间的区别:   1.记录bug 在Web端可以通过系统自带的截图和QQ截图等方式来截取bug的图片,对于错误的地方可以用工具自带的标识来 ...

随机推荐

  1. [Swift]动态变化顶部状态栏(statusBar)的颜色

    顶部状态栏(statusBar)的两种样式: (1).default 样式:黑色. (2).light 样式:白色 一.无导航栏情况 如果没有使用导航控制器 UINavigationControlle ...

  2. 使用ASP.NET Core开发GraphQL服务器 -- 预备知识(下)

    上一篇文章:https://www.cnblogs.com/cgzl/p/9734083.html 处理数据 嵌套字段 看例子: 我想查看viewer下的repositories.注意里面的edges ...

  3. Elasticsearch的基本概念和指标

    背景 在13年的时候,我开始负责整个公司的搜索引擎.嗯……,不是很牛的那种大项目负责人.而是整个搜索就我一个人做.哈哈. 后来跳槽之后,所经历的团队都用Elasticsearch,基本上和缓存一样,是 ...

  4. 将你的前端应用打包成docker镜像并部署到服务器？仅需一个脚本搞定

    1.前言 前段时间,自己搞了个阿里云的服务器.想自己在上面折腾,但是不想因为自己瞎折腾而污染了现有的环境.毕竟,现在的阿里云已经没有免费的快照服务了.要想还原的话,最简单的办法就是重新装系统.而一旦重 ...

  5. Tomcat NIO 模型的实现

    Tomcat 对 BIO 和 NIO 两种模型都进行了实现,其中 BIO 的实现理解起来比较简单,而 NIO 的实现就比较复杂了,并且它跟常用的 Reactor 模型也略有不同,具体设计如下: 可以看 ...

  6. 使用seaborn探索泰坦尼克号上乘客能否获救

    titanic数据集是个著名的数据集.kaggle上的titanic乘客生还率预测比赛是一个很好的入门机器学习的比赛. 数据集下载可以去https://www.kaggle.com/c/titanic ...

  7. sql字符串分割扩展方法

    可编程性—表值函数 SET ANSI_NULLS ON GO SET QUOTED_IDENTIFIER ON GO CREATE FUNCTION [dbo].[Split] ( @RowData ...

  8. Autofac 和 Quartz.Net 自动注入的整合

    一:问题场景 在一次项目开发中,项目中已使用了Autofac.在新需求中要用到Quatrz.Net.在任务中使用注入方法,确始终无法使用注入的方法,经过千百次的度娘,终于找到了解决办法!吐槽下度娘真心 ...

  9. Windows Tomcat 日志输出到 catlina.out 按日期输出，自启动

    配置tomcat和jdk环境变量 CATALINA_BASE D:\ApacheSoftwareFoundation\Tomcat8.5 CATALINA_HOME D:\ApacheSoftware ...

  10. webservice创建、部署和调用

    webservice 可以用于分布式应用程序之间的交互,和不同程序之间的交互. 下面通过一个简单的例子来创建一个webservice,用的是vs2010开发工具 首先创建一个web应用程序 接着我们添 ...