移动端软键盘弹出挤压页面

公司项目是微信公众号网页，用的是Jquery,单位是vh,这就导致横屏时页面高度很小，元素都都被压缩，我自己看着都难受，就不要说用户了。

还有当软键盘弹出时页面也会受到挤压，那怎么解决的呢？
看，代码–

a.html 
  	<meta name="viewport" id="viewportMeta" content="width=device-width,initial-scale=1,user-scalable=no" />
  	
b.js
 function transverse(height){
        var dom=document.getElementById('metaid');
        var metaStr='height='+height+',width=device-width,initial-scale=1.0,user-scalable=no';
        dom.setAttribute('name', 'viewport');
        dom.setAttribute('content', content);
    }
    var getheight=window.innerHeight>window.innerWidth?window.innerHeight:window.innerWidth;
    transverse(getheight);

其实原理非常简单，就是当高度小于宽度时，把宽度赋值给高度，也就是说当屏幕横向时，把横向的宽度赋值给高度。遇到相似难题的可以一试。