本文介绍了在微信端和移动浏览器端实现横屏签名的方法。在微信端，通过CSS transform实现元素旋转，但canvas不能旋转。推荐使用个人开发的vue-fast-signature插件，提供getBase64PNG()和getHorizontal()方法获取签名数据。文章提供了插件安装及使用示例代码。
1、如何实现横屏功能
微信端：
由于微信端默认不开启横屏模式，且在安卓手机上，就算开启了手机自带的屏幕旋转，微信也需要手动开启横屏模式才可以让微信横屏显示。
而且大多数用户都不会开启，因为太不方便了，所以要在微信上实现横向签名，就需要一点小技巧。
以全屏横屏签名为例：
1.1 首先屏幕不能横过来，我们可以利用css让元素横过来，比如一个按钮 button，我们可以为它设置css
transform: rotate(90deg); ，然后按钮在屏幕上就横过来了，此时横着手机看这个按钮就是正着的。
1.2 其次，签名所用的画布canvas是不能通过transform来旋转的，因为会导致笔画显示区域异常，这里也不好解释，你只要记住画布尽量不能旋转就可以了。
1.3 用户进入页面后，可以看到没被旋转的画布，因为画布没有区分方向，还有横过来的按钮，所以视觉上，这就是横屏的，实际上这只是个横屏障眼法。
移动浏览器端：
1.4 移动浏览器可以通过设置手机内置的屏幕旋转来达到横屏和竖屏的目的，不像微信一样做了绝对禁止。所以我们的解决方案就不能和微信一样。
1.5 根据横屏和竖屏各出一套css方案，然后正常布局即可。
1.6 css如下：
/* portrait */
@media screen and (orientation:portrait) {
/* 竖屏情况下 */
/* portrait-specific styles */<
最低0.47元/天 解锁文章
扫一扫
2941
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
