移动端如何让页面强制横屏
字数700&阅读4734&
最近公司要开发一个移动端的养成类网页游戏（就是用手点各种按钮最后你会找到一个女朋友=。=），要求横屏显示，不能竖屏。有经验的你肯定知道，当用户竖屏打开时，提示说你要把手机转过来是在是件很傻×的事情。这时如果用户没开启手机里的横屏模式，还要逼用户去开启。这时候用户早就不耐烦的把你的游戏关掉了。我先进行了调研，想看有没有现成的api。参考过以及&，实验结果当然是不行。那么现在我唯一能想到的解决办法，就是在竖屏模式下，写一个横屏的div，然后把它转过来。
好了我的测试页面结构如下：
很简单对不对，最终的理想状态是，把lol非常和谐的横过来。好了来看看区分横屏竖屏的css：
@media screen and (orientation: portrait) {
说白了，是要把print这个div在竖屏模式下横过来，横屏状态下不变。所以在portrait下，没定义它的宽高。会通过下面的js来补。
var width = document.documentElement.clientW
var height =
document.documentElement.clientH
if( width & height ){
console.log(width + " " + height);
$('#print');
$print.width(height);
$print.height(width);
$print.css('top',
(height-width)/2 );
$print.css('left',
0-(height-width)/2 );
$print.css('transform' , 'rotate(90deg)');
$print.css('transform-origin' , '50% 50%');
在这里我们先取得了屏幕内可用区域的宽高，然后根据宽高的关系来判断是横屏还是竖屏。如果是竖屏，就把print这个div的宽高设置下，对齐，然后旋转。最终效果如下：
最后，这么做带来的后果是，如果用户手机的旋转屏幕按钮开着，那么当手机横过来之后，会造成一定的悲剧。解决办法如下:
var evt = "onorientationchange" in window ? "orientationchange" : "resize";
window.addEventListener(evt, function() {
console.log(evt);
var width = document.documentElement.clientW
var height =
document.documentElement.clientH
$('#print');
if( width & height ){
$print.width(width);
$print.height(height);
$print.css('top',
$print.css('left',
$print.css('transform' , 'none');
$print.css('transform-origin' , '50% 50%');
$print.width(height);
$print.height(width);
$print.css('top',
(height-width)/2 );
$print.css('left',
0-(height-width)/2 );
$print.css('transform' , 'rotate(90deg)');
$print.css('transform-origin' , '50% 50%');
}, false);
阅读(...) 评论()posts - 28,&
comments - 13,&
trackbacks - 0
& & &昨天朋友问我，怎么实现在竖屏的应用里，显示一个横屏的应用，由于也没做过
就说不知道了，但是我觉得会有这样的API ，因为我手机里就安装有这种类型的软件
今天早上起来，就想做一个Demo出来，惯例的是查找资料，测试是否可以使用，但是
查找了都写的不是很清楚，很容易造成没法实现想要的效果，所以想重新写过一个
希望能帮到有这个需求的朋友。（这个没什么经验，的是照着网上的资料拼凑起来，
如果有错误，请见谅，有更好的办法也可以告诉我）
实现的效果：
& & & & 页面大部分是竖屏，个别页面可以旋转手机时页面变为横屏（其实朋友的需求是，进入
这个页面就是横屏的，不知道怎么弄）。
实现步骤：
& 1.使应用可以横屏，新创建的默认就可以
2.在跟视图里实现以下的方法（导航控制器和TabBar控制器的可以）
-(BOOL)shouldAutorotate
return YES;
-(NSUInteger)supportedInterfaceOrientations
return [self.viewControllers.lastObject supportedInterfaceOrientations];
-(UIInterfaceOrientation)preferredInterfaceOrientationForPresentation
return [self.viewControllers.lastObject preferredInterfaceOrientationForPresentation];
3.在不需要横屏的视图控制器里面实现以下方法
-(NSUInteger)supportedInterfaceOrientations
return UIInterfaceOrientationMaskP
- (BOOL)shouldAutorotate
return NO;
-(UIInterfaceOrientation)preferredInterfaceOrientationForPresentation
return UIInterfaceOrientationP
&4，需要横屏的页面不需要其他的处理就可以了。
阅读(...) 评论()今日头条如何把竖屏变为横屏_百度知道
今日头条如何把竖屏变为横屏
今日头条如何把竖屏变为横屏
我有更好的答案
将 手机上方的设置 自动转屏
打开 今日头条， 然后将手机横放，竖屏便自动变成了横屏
着技术的发展，UC头条的推送水平会越来越高，LOW不LOW，到时候，更多取决于用户，你很难说UC头条到底是LOW还是不LOW，它只是个内容平台
为您推荐：
其他类似问题
换一换
回答问题，赢新手礼包
个人、企业类
违法有害信息,请在下方选择后提交
色情、暴力
我们会通过消息、邮箱等方式尽快将举报结果通知您。如何设置横屏竖屏？【kindle吧】_百度贴吧
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&签到排名：今日本吧第个签到，本吧因你更精彩，明天继续来努力！
本吧签到人数：0成为超级会员，使用一键签到本月漏签0次！成为超级会员，赠送8张补签卡连续签到：天&&累计签到：天超级会员单次开通12个月以上，赠送连续签到卡3张
关注：549,207贴子：
如何设置横屏竖屏？收藏
kindle for android的，没找到设置的地方啊。
有人说用如下步骤，但是貌似我的和这个不一样。第1步：打开文档，点一下屏幕上方出现选项卡；第2步：点击Aa 这个选项——出现字体/页码/阅读进度三个选项第3步：选择页码——看到间距、页边距、方向 三个选项第4步：选择方向——可以是横屏或竖屏
字体里面，只有亮度、字体大小、颜色、页边距、行间距、栏，没别的设置。那会在哪呢？
我的也没有，打开自动旋转就好了
手机应该可以自动设置横屏
点击屏幕右下角会出现一个“锁”的按钮，点一下解锁屏幕再跟随手机自动旋转就可以了
安卓版就是不能看，看了眼都瞎了，只能用黑色背景，啊妈选的小心思也是够了
登录百度帐号推荐应用&>&手机页面强制横屏显示
可更改竖屏
手机页面强制横屏显示
可更改竖屏
上传大小：42KB
手机页面强制横屏显示 竖屏会有手机旋转遮罩提示
之前整理的文件
现在清理电脑，先上传，以备下次使用...
综合评分：0（0位用户评分）
下载个数：
{%username%}回复{%com_username%}{%time%}\
/*点击出现回复框*/
$(".respond_btn").on("click", function (e) {
$(this).parents(".rightLi").children(".respond_box").show();
e.stopPropagation();
$(".cancel_res").on("click", function (e) {
$(this).parents(".res_b").siblings(".res_area").val("");
$(this).parents(".respond_box").hide();
e.stopPropagation();
/*删除评论*/
$(".del_comment_c").on("click", function (e) {
var id = $(e.target).attr("id");
$.getJSON('/index.php/comment/do_invalid/' + id,
function (data) {
if (data.succ == 1) {
$(e.target).parents(".conLi").remove();
alert(data.msg);
$(".res_btn").click(function (e) {
var parentWrap = $(this).parents(".respond_box"),
q = parentWrap.find(".form1").serializeArray(),
resStr = $.trim(parentWrap.find(".res_area_r").val());
console.log(q);
//var res_area_r = $.trim($(".res_area_r").val());
if (resStr == '') {
$(".res_text").css({color: "red"});
$.post("/index.php/comment/do_comment_reply/", q,
function (data) {
if (data.succ == 1) {
var $target,
evt = e || window.
$target = $(evt.target || evt.srcElement);
var $dd = $target.parents('dd');
var $wrapReply = $dd.find('.respond_box');
console.log($wrapReply);
//var mess = $(".res_area_r").val();
var mess = resS
var str = str.replace(/{%header%}/g, data.header)
.replace(/{%href%}/g, 'http://' + window.location.host + '/user/' + data.username)
.replace(/{%username%}/g, data.username)
.replace(/{%com_username%}/g, data.com_username)
.replace(/{%time%}/g, data.time)
.replace(/{%id%}/g, data.id)
.replace(/{%mess%}/g, mess);
$dd.after(str);
$(".respond_box").hide();
$(".res_area_r").val("");
$(".res_area").val("");
$wrapReply.hide();
alert(data.msg);
}, "json");
/*删除回复*/
$(".rightLi").on("click", '.del_comment_r', function (e) {
var id = $(e.target).attr("id");
$.getJSON('/index.php/comment/do_comment_del/' + id,
function (data) {
if (data.succ == 1) {
$(e.target).parent().parent().parent().parent().parent().remove();
$(e.target).parents('.res_list').remove()
alert(data.msg);
//填充回复
function KeyP(v) {
var parentWrap = $(v).parents(".respond_box");
parentWrap.find(".res_area_r").val($.trim(parentWrap.find(".res_area").val()));
评论共有0条
VIP会员动态
CSDN下载频道资源及相关规则调整公告V11.10
下载频道用户反馈专区
下载频道积分规则调整V1710.18
spring mvc+mybatis+mysql+maven+bootstrap 整合实现增删查改简单实例.zip
资源所需积分/C币
当前拥有积分
当前拥有C币
输入下载码
为了良好体验，不建议使用迅雷下载
手机页面强制横屏显示
可更改竖屏
会员到期时间：
剩余下载个数：
剩余积分：0
为了良好体验，不建议使用迅雷下载
积分不足！
资源所需积分/C币
当前拥有积分
您可以选择
程序员的必选
绿色安全资源
资源所需积分/C币
当前拥有积分
当前拥有C币
(仅够下载10个资源)
为了良好体验，不建议使用迅雷下载
资源所需积分/C币
当前拥有积分
当前拥有C币
为了良好体验，不建议使用迅雷下载
资源所需积分/C币
当前拥有积分
当前拥有C币
您的积分不足，将扣除 10 C币
为了良好体验，不建议使用迅雷下载
你当前的下载分为234。
你还不是VIP会员
开通VIP会员权限，免积分下载
你下载资源过于频繁，请输入验证码
您因违反CSDN下载频道规则而被锁定帐户，如有疑问，请联络:!
若举报审核通过，可返还被扣除的积分
被举报人：
举报的资源分：
请选择类型
资源无法下载
资源无法使用
标题与实际内容不符
含有危害国家安全内容
含有反动色情等内容
含广告内容
版权问题，侵犯个人或公司的版权
*详细原因：
手机页面强制横屏显示
可更改竖屏