html让网页在手机端自动横屏,Css实现手机端页面强制横屏的方法示例

样式

@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;

}

结构

非常多非常多的文字

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

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

html让网页在手机端自动横屏,Css实现手机端页面强制横屏的方法示例相关推荐

html5页面强制横屏,移动端如何让页面强制横屏
移动设备可以旋转屏幕,但如何做到就算旋转手机页面始终横屏显示呢?首先取得屏幕内可用区域的宽高,然后根据宽高的关系来判断是横屏还是竖屏.如果是竖屏,就把div的宽高设置成横屏的高宽,然后旋转. 好了我的 ...
Css实现手机端页面强制横屏
样式 @media screen and (orientation: portrait) {html{width : 100vmin;height : 100vmax;}body{width : 10 ...
手机html强制横屏显示,Css实现手机端页面强制横屏(仅适用与一屏页面)
样式 @media screen and (orientation: portrait) { html{ width : 100vmin; height : 100vmax; } body{ widt ...
html 静止横屏,CSS实现Html页面强制横屏
说起来html页面强制横屏,最多的都是js实现html页面强制横屏,用css实现这个功能的,很少人知道,那么今天就谈一谈如何用CSS实现html页面横屏显示,无论用户怎么旋转手机都是横屏!!! 场景分 ...
Zoom网页端，电脑客户端，平板手机端有什么区别与应用
Zoom网页端,电脑客户端,平板手机端有什么区别与应用就像我们日常中用到的软件一样,为了大家的使用方便,为了在各种设备上面都能应用.Zoom也分为网页端,电脑客户端,,平板手机端 Zoom网页端,会 ...
css+引入手机端插件,jQuery手机端mobiscroll时间选择插件
特效描述:手机端mobiscroll 时间选择.jQuery手机端mobiscroll时间选择插件代码结构 1. 引入CSS 2. 引入JS 3. HTML代码时间选择: 列表选择: $(func ...
移动端如何让页面强制横屏
移动端如何让页面强制横屏字数700 阅读4734 评论8 喜欢8 最近公司要开发一个移动端的养成类网页游戏(就是用手点各种按钮最后你会找到一个女朋友=.=),要求横屏显示,不能竖屏. 有经验的你肯定 ...
[html] 移动端如何让页面强制横屏显示？
[html] 移动端如何让页面强制横屏显示? 说个想法不一定能实现web端的话通过判断页面屏幕宽度(这个得开陀螺仪权限吧) 然后经行div旋转个人简介我是歌谣,欢迎和大家一起交流前后端知识.放 ...
html让网页在手机端自动横屏,如何实现移动端页面默认横屏显示
思路分析使用 postcss-pxtorem 自动将 px 转为 rem; 结合当前浏览器窗口宽高及 orientation 来判断当前设备横竖屏状态: 根据当前横竖屏状态采用不同处理逻辑: 创建项 ...
html电脑显示手机隐藏,右侧悬浮菜单悬浮窗 css+html css自动判断PC显示手机端隐藏...
感觉还不错,只是部署到博客不太搭配(颜色太鲜艳了),用css加了个设备判断,电脑端显示.手机端隐藏.1221px 界点预览: html代码: 在线图床业务平台积分获取积分素材官方客服官方客服: ...

html让网页在手机端自动横屏,Css实现手机端页面强制横屏的方法示例

html让网页在手机端自动横屏,Css实现手机端页面强制横屏的方法示例相关推荐

最新文章

热门文章