样式

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
@media screen and (orientation: portrait) {
    html{
        width : 100vmin;
        height : 100vmax;
    }
    body{
        width : 100vmin;
        height : 100vmax;
    }
    #gyroContain{
        width : 100vmax;
        height : 100vmin;
        transform-origin: top left;
        transform: rotate(90deg) translate(0,-100vmin);
    }
  }
@media screen and (orientation: landscape) {
    html{
        width : 100vmax;
        height : 100vmin;
    }
    body{
        width : 100vmax;
        height : 100vmin;
    }
    #gyroContain{
        width : 100vmax;
        height : 100vmin;
    }
}

结构

?
1
2
3
4
5
6
7
<html>
    <body>
        <div id="gyroContain">
            非常多非常多的文字
        </div>
    </body>
</html>

P.S. 如果你的页面里有from表单要填的话，css3背景动画应该用 「弹出遮罩层让用户旋转手机」 的解决方案。检测手机竖屏下，提示用关闭屏幕旋转锁定，并横置手机。想想手机浏览器还是竖屏，而内容却被强制横屏的画面有多奇怪吧...

P.S. 页面强制横屏是一碗都快放坏了的冷饭。但文主百度到的解决方法都用了js代码。文主觉得有些高炮打蚊子。所以自己用Css+Html实现了一个。文章内的代码只是一个给大家发散思维的littleDemo，你们想竖屏滚动就去掉height加y-auto, 想有背景色就加bg-color，还望大家不要讨伐我的不严谨啊。第一篇文章，望海涵。

Css实现手机端页面强制横屏的方法示例的更多相关文章

  1. 手机端页面自适应解决方案—rem布局进阶版

    手机端页面自适应解决方案—rem布局进阶版   https://www.jianshu.com/p/985d26b40199 注:本文转载之处:https://www.cnblogs.com/anni ...

  2. 手机端页面自适应解决方案—rem布局（进阶版，附源码示例）

    转自:https://segmentfault.com/a/1190000007350680 一年前笔者写了一篇 <手机端页面自适应解决方案—rem布局>,意外受到很多朋友的关注和喜欢.但 ...

  3. 移动端web如何让页面强制横屏

    前段时间公司针对直播服务做了改版升级,APP客户端支持了横屏和竖屏推流/播放. 在这个背景下,虽然触屏未做改动,但本着敏而好学,不断探索的精神,针对如何让web页面强制横屏显示,做了一下试验研究. 首 ...

  4. rem手机端页面自适应完美解决方案（最新）

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  5. 【web前端】移动端控制台插件，手机端页面查看相关页面控制台信息

    一般调试手机端页面时,基本是在PC端使用手机模式进行断点或console调试.或查看有用的控制台信息的,但依旧有部分功能无法在PC端调试,经常需要使用alert进行断点,然后在手机端看效果,但是这样并 ...

  6. 关于HTML5手机端页面缩放的问题

    通常在写HTML5手机端页面的时候,我们会发现页面所显示元素的比例不正确,那此时我们需要添加的就是: <meta name="viewport" content=" ...

  7. 移动端(手机端)页面自适应解决方案—rem布局篇

    移动端(手机端)页面自适应解决方案-rem布局 假设设计妹妹给我们的设计稿尺寸为750 * 1340.结合网易.淘宝移动端首页html元素上的动态font-size属性.设计稿尺寸.前端与设计之间协作 ...

  8. PC端页面转换成手机端页面的分辨率问题的理解

    PC端页面转换成手机端页面的分辨率问题的理解 px vw rem 假如就以a4纸模式为设计图 ,在a3纸模式中设计,然后设计出来展示在不同的a4纸模式上 通常是 750px -> 100vw / ...

  9. 手机端页面rem自适应脚本

    什么是rem 参照 web app变革之rem 在我看来,rem就是1rem单位就等于html节点fontsize的像素值.所以改变html节点的fontsize是最为关键的一步.根据手机宽度改变相对 ...

随机推荐

  1. 文末福利丨i春秋互联网安全校园行第1站精彩回顾

    活动背景 为响应国家完善网络安全人才培养体系.推动网络安全教育的号召,i春秋特此发起“互联网安全校园行”系列活动.旨在通过活动和知识普及提升大学生信息安全意识,并通过线下交流.技能分享.安全小活动以及 ...

  2. [Swift]LeetCode494. 目标和 | Target Sum

    You are given a list of non-negative integers, a1, a2, ..., an, and a target, S. Now you have 2 symb ...

  3. Eclipse工具：常用快捷键记录

    Eclipse快捷键:           按键操作  按键作用   输入sysout再按下Ctrl+Space  System.out.println()   Ctrl+1  当某行出错时时,跳出帮 ...

  4. python高级-迭代器(18)

    一.什么是迭代器 迭代是访问集合元素的⼀种⽅式. 迭代器是⼀个可以记住遍历的位置的对象. 迭代器对象从集合的第⼀个元素开始访问,直到所有的元素被访问完结束. 迭代器只能往前不会后退 二.可迭代对象 直 ...

  5. 死磕 java集合之CopyOnWriteArrayList源码分析

    欢迎关注我的公众号"彤哥读源码",查看更多源码系列文章, 与彤哥一起畅游源码的海洋. 简介 CopyOnWriteArrayList是ArrayList的线程安全版本,内部也是通过 ...

  6. 『战略游戏 最大利润 树形DP』

    通过两道简单的例题,我们来重新认识树形DP. 战略游戏(luoguP1026) Description Bob喜欢玩电脑游戏,特别是战略游戏.但是他经常无法找到快速玩过游戏的办法.现在他有个问题.他要 ...

  7. php_D3_“简易聊天室 ”实现的关键技术 详解

                      PHP+MySQL实现Internet上一个简易聊天室的关键技术  系统目标: 聊天室使用数据库汇集每个人的发言,并可将数据库内的发言信息显示在页面,让每个用户都可 ...

  8. Net Configuration Agent

    提出Configuration Agent这样一个东西可能会让人感到奇怪,对于配置信息读取什么还需要一个Agent;那Agent的作用是什么,能达到一个怎样的目的,下面讲解为何需要Agent和其重要性 ...

  9. .NET应用程序管理服务AMS设计

    AMS全称是Application Management Server即应用程序管理服:由于经常要写些一些应用服务,每次部署和维护都比较麻烦,首先要针对服务编写一个windows服务程序方便系统启动里 ...

  10. docker~在centos容器中安装新程序

    上一篇我们使用了阿里加速器安装了centos镜像,然后创建了一个新容器,运行了这个镜像,这一讲我们来为这个镜像添加一些应用程序,然后再保存容器,push容器到仓储,大家就可以直接pull我生产的容器了 ...