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实战项目之CMS 第一章 入门篇-开篇及总体规划

    作者:依乐祝 原文地址:https://www.cnblogs.com/yilezhu/p/9977862.html 写在前面 千呼万唤始出来,首先,请允许我长吸一口气!真没想到一份来自28岁老程序员 ...

  2. Postman Mock Server

    为了不影响前端开发的进度,一般后端都是先定数据结构,然后写个假接口让前端调用,这样前端就不必等着后端接口开发完成以后再开始了.届时,前后端以及UI和测试就可以并行,待双方都把各自的逻辑写好了,便可以联 ...

  3. vue项目首屏加载优化实战

    问题 单页面应用的一个问题就是首页加载东西过多,加载时间过长.特别在移动端,单页面应用的首屏加载优化更是绕不开的话题.下面我会写出我在项目中做的一些优化,希望大家能够相互讨论,共同进步. 我的项目vu ...

  4. void类型和void* 的用法

    C语言中的void  和 void * 总结 1.void的作用 c语言中,void为“不确定类型”,不可以用void来声明变量.如:void a = 10:如果出现这样语句编译器会报错:variab ...

  5. .NET CAD二次开发学习 直线画矩形并转换成组

    主要代码: using System;using System.Collections.Generic;using System.Linq;using System.Text;using System ...

  6. Java 项目中一种简单的动态修改配置即时生效的方式 WatchService

    这种方式仅适合于比较小的项目,例如只有一两台服务器,而且配置文件是可以直接修改的.例如 Spring mvc 以 war 包的形式部署,可以直接修改resources 中的配置文件.如果是 Sprin ...

  7. Springboot整合activemq

    今天呢心血来潮,也有很多以前的学弟问到我关于消息队列的一些问题,有个刚入门,有的有问题都来问我,那么今天来说说如何快速入门mq. 一.首先说下什么是消息队列? 1.消息队列是在消息的传输过程中保存消息 ...

  8. 怎么从Linux服务器上下载超过4G的文件？

    使用sz命令下载文件时,超过4G下载不了,如何下载呢? 本文介绍的方法是先对该文件进行拆分,拆分成多个小于4G的文件,然后分别下载,下载到本地后再进行合并或直接解压,具体操作如下: 1.分拆为多个文件 ...

  9. nginx系列12：一致性哈希算法

    前面一节的hash算法存在一个问题,当上游的应用服务器因某一台down掉导致服务器数量发生变化时,会导致大量的请求路由策略失效,一致性哈希算法可以缓解这个问题. 一致性哈希算法 1,hash算法存在的 ...

  10. throw和throws的区别以及try,catch,finally在有return的情况下执行的顺序

    一,抛出异常有三种形式,一是throw,一个throws,还有一种系统自动抛异常.下面它们之间的异同. (1).系统自动抛异常 1.当程序语句出现一些逻辑错误.主义错误或类型转换错误时,系统会自动抛出 ...