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. 1.Flask URL和视图

    1.1.第一个flask程序 from flask import Flask #创建一个Flask对象,传递__name__参数进去 app = Flask(__name__) #url与视图映射 @ ...

  2. HTTP 内容编码，也就这 2 点需要知道 | 实用 HTTP

    Hi,大家好,我是承香墨影! HTTP 协议在网络知识中占据了重要的地位,HTTP 协议最基础的就是请求和响应的报文,而报文又是由报文头(Header)和实体组成.大多数 Http 协议的使用方式,都 ...

  3. springboot~Money类型在序列化时遇到的问题与解决

    在java扩展包里,有这样一个包,它可以描述货币类型,它说币种和金额组成,可以应用在任何复杂的场合里,这个对象结构如下: { "price": { "amount&quo ...

  4. View的绘制流程

    这是年假最后一篇笔记了,本篇文章的内容主要来自<android开发艺术探索>,在文章的最后有这本书的网上版本. 项目源码 目录 MeasureSpec SpecMode分类 UNSPECI ...

  5. Unity MMORPG游戏开发教程（一）——初识Unity

    五邑隐侠,本名关健昌,10年游戏生涯,现隐居五邑.本系列文章以C#为介绍语言,基于Unity2017.4.x. 一.环境搭建 我使用的是Unity+VSCode,用的是mac系统,windows的自己 ...

  6. WebServeice 动态代理类

    1, webservice是什么? 是一个平台独立的,低耦合的,自包含的.基于可编程的web的应用程序,可使用开放的XML(标准通用标记语言下的一个子集)标准来描述.发布.发现.协调和配置这些应用程序 ...

  7. C#面试考点集锦

    C#面试考点集锦 ©智客坊      岁末年初往往是程序猿准备跳槽的高峰,当然互联网行业跳槽几乎是每个月都在发生,没有太过明显的淡季~那么,如何提高面试的通过率,最终顺利的拿到自己心仪的offer呢? ...

  8. 从零开始学安全(四十二)●利用Wireshark分析ARP协议数据包

    wireshark:是一个网络封包分析软件.网络封包分析软件的功能是撷取网络封包,并尽可能显示出最为详细的网络封包资料.Wireshark使用WinPCAP作为接口,直接与网卡进行数据报文交换,是目前 ...

  9. [TCP/IP] 网络层-简单查看路由表

    使用抓包工具排除网络故障:1.如果一台计算机在网络上发广播包,广播的mac地址是全ff,就有可能堵塞2.使用抓包工具,检测广播包和多播包 网络畅通的条件:数据包有去有回1.路由器使用路由表找到目标网段 ...

  10. 为什么单线程的Redis这么快？

    一. Redis简介 Redis是一个开源的内存中的数据结构存储系统,它可以用作数据库.缓存和消息中间件. 它支持多种类型的数据结构,如 字符串(strings), 散列(hashes), 列表(li ...