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. .NET Core微服务之基于Ocelot实现API网关服务（续）

    Tip: 此篇已加入.NET Core微服务基础系列文章索引 一.负载均衡与请求缓存 1.1 负载均衡 为了验证负载均衡,这里我们配置了两个Consul Client节点,其中ClientServic ...

  2. WelcomeActivity【欢迎界面】

    版权声明:本文为HaiyuKing原创文章,转载请注明出处! 前言 简单记录下欢迎界面的布局以及倒计时和跳过功能. 效果图 代码分析 1.修改APP整个主题为无标题栏样式:styles.xml文件 & ...

  3. 使用EOLINKER做接口测试最佳路径（上）

    本文内容: 测试脚本管理:讲述如何在 EOLINKER 上设计测试项目目录结构. 编写测试脚本:讲述如何在 EOLINKER 上编写接口测试脚本. 测试脚本执行及报告:讲述如何在 EOLINKER 上 ...

  4. Vue Mixin 与微信小程序 Mixins 应用

    什么是Mixin(混入) Mixin是一种思想,用来实现代码高度可复用性,可以针对属性复制实现代码复用的想法进行一个扩展,就是混入(mixin).混入并不是复制一个完整的对象,而是从多个对象中复制出任 ...

  5. 全内存的redis用习惯了？那能突破内存限制类redis产品ssdb呢？

    首先说一下背景,在双十一的时候,我们系统接受X宝的订单推送,同事原先的实现方式是使用redis的List作为推送数据的承载,在非大促的场景下, 一切运行正常,内存占用大概3-4G,机器是16G内存.由 ...

  6. Springboot 系列（十）使用 Spring data jpa 访问数据库

    前言 Springboot data jpa 和 Spring jdbc 同属于 Spring开源组织,在 Spring jdbc 之后又开发了持久层框架,很明显 Spring data jpa 相对 ...

  7. [Javascript] encodeURIComponent()方法

    在vue項目中使用vue-router通过url进行传值 encodeURIComponent encodeURIComponent() 函数可把字符串作为 URI 组件进行编码.encodeURIC ...

  8. HTTP协议及其相关

    URI.URL.URN URL,统一资源定位符,用来标识某一处资源的地址,必须包含协议和域名,协议指的是HTTP.FTP.WS.file等协议,域名就是常说的网址,比如www.baidu.com ,其 ...

  9. WPF ResourceDictionary 主题资源替换（一）

    当我们需要在程序中替换主题,更换另一套背景.颜色.样式时,如何在不修改资源Key值,直接替换呢? 问题&疑问 1. Key值冲突 同一ResourceDictionary中,不可以使用相同Ke ...

  10. 学JAVA第十八天，接口与抽象类进一步加深

    昨天老师讲了建网站,还要交钱买东西的,所以就没写,今天讲了接口与抽象类进一步加深 上完今天的课后,我才知道一个接口可以有多个实现类,一个实现类可以同时接多个接口. 现在就用代码来解释吧!!! 举例用人 ...