横屏问题

function orientation(){
    function initOrient(){
        var div = document.createElement("div"),
            error = document.createElement("div"),
            p1 = document.createElement("p"),
            p2 = document.createElement("p");
        div.className = 'orientation_tip hidden';
        error.className = 'error_page';
        p1.className = 'img';
        p2.innerHTML = '竖屏状态下使用,体验效果更佳';
        error.appendChild(p1);
        error.appendChild(p2);
        div.appendChild(error);
        document.body.appendChild(div);
        onorient();
    }
    function onorient(){
        if (window.orientation === 180 || window.orientation === 0) {
            $('.orientation_tip').hide();
            $('body').off('touchmove');
        }
        if (window.orientation === 90 || window.orientation === -90) {
            $('.orientation_tip').show();
            $('body').on('touchmove', function (event) {
                event.preventDefault();
            }, false);
        }
    }
    initOrient();
    window.addEventListener("onorientationchange" in window ? "orientationchange" : "resize", function() {
        onorient();
    }, false);
}

export { orientation }
//select和input在安卓手机上的对齐问题
	function inputAlign(){
    		var u = navigator.userAgent;
  		  var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1;
  		  if(isAndroid){
        			$('.padding-align').css({"paddingLeft" : '99px'});
   		 }
	}

	Domready(function(){
	    orientation();
	    inputAlign();
	});

.orientation_tip {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #fff;
  z-index: 1000; }
  .orientation_tip .error_page {
    height: 3.2rem;
    text-align: center;
    position: absolute;
    top: 50%;
    -webkit-transform: translate(0, -50%);
    -ms-transform: translate(0, -50%);
        transform: translate(0, -50%); }
    .orientation_tip .error_page p {
      margin-top: 0;
      padding-top: 0;
      text-align: center; }
    .orientation_tip .error_page .img {
      width: 2.53333rem;
      height: 2.57333rem;
      margin: 0 auto;
      background: url("../img/fenqi/plutus04.png") no-repeat;
      background-size: 2.53333rem 2.57333rem; }

.hide {
  display: none; }
  
.error_page, .g-nothing {
  text-align: center;
  width: 100%;
  overflow: hidden; }
  .error_page img, .g-nothing img {
    margin: 0 auto;
    display: block; }
    .error_page img.net, .g-nothing img.net {
      width: 5.86667rem; }
    .error_page img.no-list, .g-nothing img.no-list {
      width: 4rem; }
  .error_page p, .g-nothing p {
    margin-top: 0.26667rem;
    text-align: center; }
    .error_page p:first-of-type, .g-nothing p:first-of-type {
      padding-top: 2.53333rem; }
posted @ 2017-04-07 14:49  sakura-sakura  阅读(203)  评论(0编辑  收藏  举报