zoukankan      html  css  js  c++  java
  • 横屏问题

    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;
       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 {
           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;
       100%;
      overflow: hidden; }
      .error_page img, .g-nothing img {
        margin: 0 auto;
        display: block; }
        .error_page img.net, .g-nothing img.net {
           5.86667rem; }
        .error_page img.no-list, .g-nothing img.no-list {
           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; }
    
  • 相关阅读:
    C#中小写人民币转大写
    Oracle中按规定的字符截取字符串
    Oracle中table数据数据类型
    Oracle中case的第二种用法
    javascript跳转页面
    C#添加二维码带加密带logo
    Oracle
    Oracle中with关键字的使用
    jquery
    插入排序,希尔排序原理,代码及复杂度分析
  • 原文地址:https://www.cnblogs.com/sakura-sakura/p/6678076.html
Copyright © 2011-2022 走看看