样式

?
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. [Zephyr] 1、在linux上安装Zephyr-OS并跑DEMO

    星期五, 14. 九月 2018 02:18上午 - BEAUTIFULZZZZ 0) 前言 Zephyr™项目是一个采用Apache 2.0协议许可,Linux基金会托管的协作项目.为所有资源受限设 ...

  2. 分享我在 vue 项目中关于 api 请求的一些实现及项目框架

    本文主要简单分享以下四点 如何使用 axios 如何隔离配置 如何模拟数据 分享自己的项目框架 本文主要目的为以下三点 希望能够帮到一些人 希望能够得到一些建议 奉上一个使用Vue的模板框架 我只是把 ...

  3. 自学Python的经验之谈，学好Python的捷径

    其实python非常适合初学者入门.相比较其他不少主流编程语言,有更好的可读性,因此上手相对容易.自带的各种模块加上丰富的第三方模块,免去了很多“重复造轮子”的工作,可以更快地写出东西.配置开发环境也 ...

  4. Python程序里的注释和#号

    Python程序里的注释是很重要的.它们可以用自然语言告诉你某段代码的功能是什么.在你想要临时移除一段代码时,你还可以用注解的方式将这段代码临时禁用.接下来的练习将让你学会注释 : # A comme ...

  5. 心路历程（一）-自学java两个月心得

    这是我的第一条博文,在敲这些文字的时候我已经是一名大四的"老者".说自己"老者"确实如此,因为以前每当这个时候大一新学妹有上架了,哈哈,每当这个时候我们就想了很 ...

  6. GitLab 社区版 11.0.2用户管理教程

    Gitlab地址:http://xx.xx.xx.xx/users/sign_in 登录之后,主界面 右上角功能按钮,分别为管理区域.新建.问题.合并请求.待办事件.个人设置 选择管理区域按钮 可以根 ...

  7. Recursion之Demo

    Model: public class PerSon { [DisplayName("标识id")] public string id { get; set; } [Display ...

  8. Config ConnectionStrings

    <connectionStrings> <add name ="MyschoolConnectionString" connectionString =" ...

  9. 在.NET Core console application中使用User Secrets(用户机密)

    微软很坑地只在Microsoft.NET.Sdk.Web中提供了VS项目右键菜单的"管理用户机密"/"Manage User Secrets"菜单项,在使用Mi ...

  10. 在阿里云 ECS 搭建 nginx https nodejs 环境 (一、 nginx)

    首先介绍下相关环境.软件的版本 1.阿里云 ECS . ubuntu-14.04.5 LTS 2.nginx 版本 1.9.2 可能会遇到的问题: 一.在 ssh 服务器上的时候,提示 这个时候需要将 ...