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. 从壹开始微服务 [ DDD ] 之二 ║ DDD入门 & 项目结构粗搭建

    前言 哈喽大家好,今天是周二,我们的DDD系列文章今天正式开始讲解,我这两天一直在学习,也一直在思考如何才能把这一个系列给合理的传递给大家,并且达到学习的目的,还没有特别好的路线,只是一个大概的模糊的 ...

  2. Python基础（解压序列）

    解压序列: a,b=(1,2) # a,b=[1,2] print(a,b) #输出结果:1 2 #获取第一个值和最后一个值 a,*_,c=(1,2,3,4,5,6,7,8,9) print(a) p ...

  3. Linux知识要点大全（第四章）

    第四章 文件管理 *主要内容 文件和目录的操作: ①创建 ②删除 ③拷贝 ④重命名(剪切) ⑤查看 一:目录的操作 回顾与目录相关的命令 ls  查看目录中的内容 .pwd 打印当前目录   .cd  ...

  4. React的入门知识与概念【1】

    回顾在以往的项目开发中,从最初的使用的原生html+js+css+jquery开发,到后来随着项目功能的增加,也渐渐学习了Vue.js框架的开发,以及Vue.js的全家桶Axios,Vue-route ...

  5. 自定义GridControl编辑器

    本文版权归博主 惊梦无痕 所有,欢迎转载,但须保留此段声明,并给出原文链接,谢谢合作.SourceLink 鉴于网上的针对GridControl的一些代码比较凌乱,且功能分散,故将整理过的代码分享出来 ...

  6. es6涉及的那点东西

    前言 ECMAScript 6(以下简称ES6)是JavaScript语言的下一代标准.因为当前版本的ES6是在2015年发布的,所以又称ECMAScript 2015. 也就是说,ES6就是ES20 ...

  7. 基于CentOS7系统部署cobbler批量安装系统（week3_day5_part1）-技术流ken

    前言 cobbler是一个可以实现批量安装系统的Linux应用程序.它有别于pxe+kickstart,cobbler可以实现同个服务器批量安装不同操作系统版本. 系统环境准备及其下载cobbler ...

  8. 高可用实现KeepAlived原理简介

    一.简介 目前主流实现web网站及数据库服务高可用软件包括:keepalived.heartbeat.corosync,cman;高可用简称HA: 官方站点:https://www.keepalive ...

  9. PHP基础笔记

    今天一个阳光明媚的大周天,小崔百无聊赖的翻看着各种老旧的经典电影,无奈谁让自己是没女朋友的单身狗呢.闲来无事就记录一下PHP的一些基础知识吧! 1.PHP是什么? PHP是一种创建动态交互性站点的服务 ...

  10. wordpress常用函数及使用位置

    single 页面: 摘要内容:the_excerpt():如果摘要空,摘取正文内容:需要在循环中使用 获取当下页面的分类:wp_get_post_terms( int $post_id, strin ...