移动端关于手机横屏时样式修改

原创 2016年08月30日 17:00:26

          最近公司做了个微信项目,对于几乎没接触过移动端的菜鸟来说是还真是……

        不过不管是否接触过,都得努力实现各种需求呐。于是,本座就先定下个小目标:完美完成这次的移动端项目(呵呵←_←)。不知道前端的童鞋们是否遇到过这样的情况,当我们辛苦开发的页面,经过测试也觉得是无任何兼容问题的时候,心情是那个happy啊,然而突然某一测试人员把手机横过来测试,各种问题就来了,弹窗内容显示不全、布局错乱、固定区域占比大……看这效果,宝宝整个人都不好了!

        蛮多方法通过js来实现手机横屏时的各种操作,但是在这里我要说的是一种通过css来实现移动端横屏时展示效果的方法。这里我举的栗子是一个固定区域显示的栗子。

        在正常情况下(手机不横屏使用),我进行了一个固定顶部的布局,效果如下所示:

       

      然后我希望横屏的时候显示为如下效果:

    

      由此来实现横屏的时候固定顶部的区域的所占地方减小。那么关键的样式代码只要通过 @media来实现横屏是修改对应的样式了详细看如下代码为手机横屏是对应调用到的样式。

       

        即关键主要用@media screen来实现我们页面的自适应啦,而且@media screen 对移动端也很友好,又无需使用插件,是不是用的很爽啊。代码中的landscape就是标识着当手机横屏时会识别里面的样式而不适用正常情况下的样式啦。使用起来简单快捷。


(首次发表文章,文章记录结束了,撒花……赛高!!!)

版权声明:本文为博主原创文章,未经博主允许不得转载。

用css3解决移动端页面自适应横屏竖屏的思考

之前对于横屏的webapp做过一些尝试,但是始终不是很好的解决方案,前段时间又接触了类似的需求,尝试了感觉更好的解决方案。 之前的方法写的博客:移动网页横竖屏兼容适应的一些体会 这里举的例子还是平时常...
  • wuweitiandian
  • wuweitiandian
  • 2015年06月30日 16:07
  • 7842

移动端判断手机横竖屏状态

在做移动端开发的时候,在HTML页面head中加入如下代码 [html] view plain copy print? meta name="viewport" content="w...
  • xiaozhi_2016
  • xiaozhi_2016
  • 2016年08月23日 10:46
  • 2846

移动网页横竖屏兼容适应的一些体会

【文章前提】 最近接到一个需求,是一个需要在手机端
  • wuweitiandian
  • wuweitiandian
  • 2014年11月24日 15:23
  • 3594

移动端网页版强制横屏实例

  • 2017年08月23日 11:15
  • 30KB
  • 下载

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

  • 2018年01月16日 10:38
  • 3KB
  • 下载

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

原文地址:http://www.jianshu.com/p/9c3264f4a405 测试页面结构如下: lol 很简单对不对,最终的理想状态是,把lol非...
  • Catherian
  • Catherian
  • 2016年08月15日 16:05
  • 13600

用css3解决移动端页面自适应横屏竖屏的思考

之前对于横屏的webapp做过一些尝试,但是始终不是很好的解决方案,前段时间又接触了类似的需求,尝试了感觉更好的解决方案。 之前的方法写的博客:移动网页横竖屏兼容适应的一些体会 这里举的例子还是平时常...
  • wuweitiandian
  • wuweitiandian
  • 2015年06月30日 16:07
  • 7842

移动端始终横屏及rem 适配

html 横屏及rem 适配       这几天做一个项目需要始终横屏,然而找了许多资料,看到H5网页感觉并不能直接控制始终横屏,而是需要使用css3配合JS控制横屏,后面因为适配原因用到rem,...
  • snowskyBeautiful
  • snowskyBeautiful
  • 2017年07月12日 16:15
  • 187

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

最近公司要开发一个移动端的养成类网页游戏(就是用手点各种按钮最后你会找到一个女朋友=。=),要求横屏显示,不能竖屏。 有经验的你肯定知道,当用户竖屏打开时,提示说你要把手机转过来是在是件很傻×的事情。...
  • wulixiaoxiao1
  • wulixiaoxiao1
  • 2017年03月10日 14:43
  • 453

移动端如何强制页面横屏

背景最近公司要开发一个移动端的类网页游戏: 长按按钮有个自行车一直骑行,碰到某个国家的地标就弹出该国的相应say hello的tip,要求横屏显示,不能竖屏。然而当用户竖屏打开时,而且没开启手机里的横...
  • w178191520
  • w178191520
  • 2017年12月19日 21:11
  • 191
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:移动端关于手机横屏时样式修改
举报原因:
原因补充:

(最多只允许输入30个字)