android 强制竖屏显示Activity

转载

烂漫树林 2024-09-24 08:18:35

文章标签 横屏横屏适配 h5横屏 H5适配手机适配 文章分类 Android 移动开发

话题起因:

这个话题应该能聊的东西挺多的，从16年做手机端开始就研究，也写了两篇博客来记录过（但是受限于但是的经验和认知，现在看起来不是特别清晰）。

为什么今天会继续这个话题呢，在做了reactnative和之前小游戏横屏页面后，我觉得有必要总结一下。

本篇博客，最终针对wap横屏和竖屏给出两个通用的适配方案，rn上面可能实现方式和web的不大一样，但是思路逻辑是一样的。

从生产流程说起:

从生产流程来考虑，适配这个东西，产品经理和设计都是需要考虑的，相对传统pc设计，移动端能展示的区域比较小。

这个就要求设计出来的产品（后面都简称[产品]），必须要简单明了，突出重点，让用户一目了然，让目标用户一眼就能找到自己要的东西。

简单明了：不能更pc那样堆叠内容，必须让用户能够轻松愉悦的状态，打开产品就能看到我们推送给用户的东西

移动设备尺寸丰富，特别是安卓上面更新一个品牌好几个屏幕尺寸，这要求设计必须流出来足够的空间来做适配，否者东西可能会挤成一团无法阅读。

可能有人会说，对一个技术来说，有必要对产品经理和设计提需求么？

调教产品经理和激射师就这么来劲？

并不是的，在生产line上面，每个步骤的很重要。

一步出错，步步错。

初次进入公司时候，可能会拿到一些很”糟糕“的设计稿，这个可以忍，毕竟之前也没有共同工作过。

但是，之后呢？即使为了自己，也有必要和设计师沟通，告诉他我们的期待，以及这样做的好处。

这是利人利己的事情。

我们：收获一个舒服的工作环境，不必要搞奇奇怪怪的适配。

设计：收获一个好的建议，对他来说也是一个成长。

产品：收获一个良好的作品

及时沟通，及时表达我们的需求，这个非常重要！！

总结上面:

我们的设计稿需要扁平化、有适配的空间
及时加入项目(最好在立项到出设计稿过程中能和设计师沟通)，提出我们的需求

下面进入技术环境:

首先在页面头部加入这个头部信息:

<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>

它在wap环境下会把页面强制缩放等同设备屏幕可见网页【宽度】

竖屏设计稿

使用rem，根据设计稿的宽度和屏幕的宽度得到缩放比例

思路:我们希望html的字体大小为100px,

手机端默认字体大小为16px，（100%16）*100%等于625%，

假如当前设备网页可见宽度为640：

（( 640/750)*625%=533.3333333333333%

所以设置html的font-size为625%，这里是拿设备的网页可视跨度和设计稿的宽度来做比例后，得到100px缩放后的实际大小，就是默认字体大小的533%

如果我们还有一个期待，如果设备的网页可视宽度大于设计稿的宽度时候，还是期待按照设计稿的大小来，那我们就把拿到的设备网页可视宽度替换为设计稿的宽度

代码如下:

(function() {

   var designW=750;

    function setFontSize(k) {

        document.documentElement.style.fontSize =

            ((((k / designW) * 100) / 16) * 100) + '%';

    }

    function initRem() {

        var W = document.documentElement.clientWidth;

        var H = document.documentElement.clientHeight;

        if(W < H) {

            // console.log("竖屏");

            W=W>designW?designW:w;

            setFontSize(W);

        } else {

            // console.log("横屏");

              H=H>designW?designW:H;

            setFontSize(H);

        }

    }

    window.addEventListener('orientationchange' in window ? 'orientationchange' : 'resize', initRem, false);

    document.addEventListener('DOMContentLoaded', initRem, false);

})();

Css 代码:设计稿上面的10px，写成0.1rem;就可以了，因为1rem等于100

那如果是横屏设计是否可以使用rem么?

不合适

因为横屏需要考虑宽高，而不只是设计稿的宽度和设备网页可视区的宽度
rem是依赖html字体的，他是有限制的，移动端字体最小12，设置小于12的值，最终渲染也会是12px，在只考虑宽度比例下问题不大，及时有问题也可以用css缩放来取巧处理。横屏设计下，12px限制带来的问题会无限的放大（只有亲自去试过才知道，这里不举例）；
上面说得`12px限制`，是指你给html设置了11px时候，你使用2rem，实际上得到的是12px*2,而不是11px*2