js根據不同裝置進行頁面跳轉

阿新 • • 發佈：2019-01-12

最近工作遇到一個問題，就是點選按鈕通過判斷不同裝置跳轉頁面...問題主要是在蘋果裝置上有點無奈，下面是一個簡單的例子~

test.html部分

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>js判斷不同裝置</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<link rel="stylesheet" type="text/css" href="test.css">
</head>
<body>
<div id="pageBox">
    <div class="contentTop">
        <span>O(∩_∩)O哈哈哈~</span>
    </div>
    <div class="contentBottom">
        <a onclick="downApp()" id="downBtn">一鍵跳轉</a>        
    </div>
</div>
</body>
<script type="text/javascript" src="bootstrap/jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="test.js"></script>
</html>

test.css樣式部分：

*{
    box-sizing: border-box;
}
html,body{
    margin: 0;
    padding: 0;
}
html{
    font-size: 40px;
    height: 100%;
    background-color: #282828;
}
body{
    overflow-x: hidden;
    overflow-y: auto;
    color: #000;
    font-size: .7rem;
    font-family: "\5FAE\8F6F\96C5\9ED1",Helvetica,"黑體",Arial,Tahoma;
    height: 100%;
    
}
ul{
    padding: 0;
    margin: 0;
}
li{
    list-style: none;
}
#pageBox{
    background: #fff;
    overflow-x: hidden;
    margin: 0 auto;
    max-width: 640px;
    left: 0;
    top: 0;
    overflow-x: hidden;
    width: 100%;
    min-height: 100%;
}
#pageBox .contentTop, #pageBox .contentBottom{
    width: 100%;
}
#pageBox .contentTop{
    text-align: center;
    vertical-align: middle;
    background-color: #202020;
    color: #ccc;
}
#pageBox .contentBottom{
    background-color: #fff;
    padding-top: 1.25rem;
}
#downBtn{
    display: block;
    width: 80%;
    margin: 0 auto;
    /* margin-top: 1.25rem; */
    height: 1.5rem;
    line-height: 1.5rem;
    border-radius: .125rem;
    background-color: #DE034E;
    color: #fff;
    text-align: center;
    cursor: pointer;
}

test.js關於js部分：

$(document).ready(function() {
    deviceScreen();
   
    
});
/*
裝置寬度
*/
function deviceScreen(){
    screenW = window.screen.width;
    screenH = document.body.clientHeight;
    //alert(screenW);
    if(screenW<=640){
        $("html").css("font-size",screenW/16)
        $("#pageBox .contentTop").css({
            "height":((screenH*6)/10)/(screenW/16)+"rem",
            "line-height":((screenH*6)/10)/(screenW/16)+"rem"
        });
        $("#pageBox .contentBottom").css("height",((screenH*4)/10)/(screenW/16)+"rem");
    }else{
        $("html").css("font-size","40px")
        $("#pageBox .contentTop").css({
            "height":((screenH*6)/10)/40+"rem",
            "line-height":((screenH*6)/10)/40+"rem"
        });
        $("#pageBox .contentBottom").css("height",((screenH*4)/10)/40+"rem");
    }
    
}
/*
 * 一鍵下載客戶端
 */
function downApp(){
    var browser = {
            versions:function(){
                var u = navigator.userAgent;
                var app = navigator.appVersion;
                return{//移動終端瀏覽器版本資訊
                    trident: u.indexOf('Trident') > -1,  //IE核心
                    presto: u.indexOf('Presto') > -1,  //opera核心
                    webKit: u.indexOf('AppleWebKit') > -1,  //蘋果、谷歌核心
                    gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1,  //火狐核心
                    mobile: !!u.match(/AppleWebKit.*Mobile.*/),  //是否為移動終端
                    ios: !!u.match(/\(i[^;]+;( U;)? CPU.Mac OS X/),  //ios終端
                    android: u.indexOf('Android') > -1 || u.indexOf('Linux') > -1,  //android終端或者uc瀏覽器
                    iPhone: u.indexOf('iPhone') > -1,  //是否為iPhone或者QQHD瀏覽器
                    iPad: u.indexOf('iPad') > -1,  //是否iPad
                    webApp: u.indexOf('Safari') == -1,  //是否web應用程式，沒有頭部和底部
                    weixin: u.indexOf('MicroMessenger') > -1,  //是否微信
                    qq: u.match(/\sQQ/i) == " qq",  //是否QQ
                };
            }(),
            language:(navigator.browserLanguage || navigator.language).toLowerCase()
    }
    
    if(browser.versions.mobile || browser.versions.ios || browser.versions.android || browser.versions.iPhone || browser.versions.iPad){
        
        if(browser.versions.ios || browser.versions.iPhone || browser.versions.iPad){
//          alert("蘋果手機或ipad");            
            var winRef = window.open("");//開啟一個新的頁面
            function loc(){
                alert();//這個alert不能不能省略，如果省略的話有些蘋果系統跳轉會失敗，就是winRef.location賦值失敗
                // var ll = 'https://itunes.apple.com/app/id1061880281';//這個連結是進入蘋果手機的App Store的連結，只要更改後面的id值就可以了
                var ll = 'http://www.runoob.com/try/try.php?filename=try_nav_all';
                winRef.location = ll;//改變頁面的 location
            }
            setTimeout(loc(),8000);//這個等待很重要，如果不等待的話將無法實現
            
        }else{
            // alert("安卓手機");
            window.open('http://blog.csdn.net/qq_29326717/article/details/56841063', "_blank");
        }
    }else{
        // alert("PC端");
        window.open('http://d.weibo.com/?topnav=1&mod=logo&wvr=6', "_blank");
    }
}

頁面效果如下：

js根據不同裝置進行頁面跳轉

最近工作遇到一個問題，就是點選按鈕通過判斷不同裝置跳轉頁面...問題主要是在蘋果裝置上有點無奈，下面是一個簡單的例子~ test.html部分 <!DOCTYPE html> <html> <head> <meta

ShareinstallSDK根據不同裝置進行頁面跳轉

最近工作遇到一個問題，就是點選按鈕通過判斷不同裝置跳轉頁面…問題主要是在蘋果裝置上有點無奈，那麼下面就來給大家介紹一下Shareinstall。什麼是shareinstall： Shareinstall其實是一個APP的推廣輔助工具。APP開發者可以通過Sha

利用js進行頁面跳轉及傳遞引數的獲取

頁面A跳轉到頁面B及攜帶引數 window.location.href="../SystemInfoJsp/add_user.jsp?"+"id="+id+"&name="+name+"&grade="+grade; 解釋： "../SystemInfoJsp/add

在整合極光推送後，根據不同推送內容跳轉App相應的頁面

前言：由於某push到達率問題，所以我們決定換成口碑較高的極光推送，在此梳理一下完成過程，小菜鳥剛剛起步，不足之處還請各位多多指教~ 需求：1.整合極光推送 2.根據推送內容的不同跳轉相應的頁面，也就是獲取推送內容並作出處理（非官網中所

form表單只提交數據而不進行頁面跳轉的解決方案

ner 按鈕 pos mes inline -c ddr for msg 轉載　　將數據提交到saveReport（form的action指向）頁面，但是頁面又不進行跳轉，即保持當前頁面不變呢？利用jquery的ajaxSubmit函數以及form的onsubmit函數完

shiro 配置註解後無權訪問不進行頁面跳轉異常：org.apache.shiro.authz.UnauthorizedException: Subject does not have permission

class bject ram body pac framework simple -- 管理該問題需要使用異常管理：  <bean class="org.springframework.web.ser

js設定定時從一個頁面跳轉到另一個頁面

主要實現點選連結進入視訊介紹，設定定時，然後跳轉到另一個頁面程式碼如下： <script type="text/javascript"> function jumpurl(){ location='http://localhost:8080/Socket/fir

spring boot 判斷賬號密碼進行頁面跳轉

首先：controller 本文程式碼：https://download.csdn.net/download/qq_40979622/10710377 資料庫在文章最後有提到。 @RequestMapping("/") public ModelAndVie

vue三種不同方式實現頁面跳轉

Vue：router-lin <router-link to="/">[跳轉到主頁]</router-link> <router-link to="/login">[登入]</router-link> <router-li

TableViewCell 裡面嵌的TableViewCell 如何點選裡面的TableViewCell進行頁面跳轉？

下面是裡面TableView的程式碼 #import "ClassViewCell.h" #import "MyCollectionCell.h" #import "StringManager.h" #import "HomeViewController.h" #impor

【iOS】使用URLNavigator進行頁面跳轉時，push頁面無效

最近在專案中使用URLNavigator遇到了點小坑，使用xcode預設配置新建project,照著demo敲了一通發現不起作用，最後發現原因是預設配置檔案Info.plist中，配置了Main storyboard file base name 即下圖所示這個配置會影響到Ap

Form表單只提交資料而不進行頁面跳轉的方法

解決方案：將資料提交到saveReport（form的action指向）頁面，但是頁面又不進行跳轉，即保持當前頁面不變呢？利用jquery的ajaxSubmit函式以及form的onsubmit函式完成一般的寫法為： <form action="

如何避免form提交進行頁面跳轉

正常的form表單提交後需要進行頁面跳轉，如果我們不希望進行頁面跳轉，那麼按以下兩個步驟，通過一個iframe就可以解決這個問題：步驟一：首先在頁面中定義一個空的不可見的iframe <!-- 空iframe，用於協助處理form提交後不進行頁面跳轉的問題 --&g

彈出提示框，並且進行頁面跳轉

ScriptManager.RegisterStartupScript(this, this.GetType(), "", "if(confirm('註冊成功！')){location.href='.

ASP.NET MVC進行頁面跳轉並傳遞引數

第一種方法： return Content(string.Format("<script>alert('上傳成功');parent.window.location='/控制器名稱/Action方法名?引數={0}';</script>", 傳遞的引數)

js控制30秒自動頁面跳轉，帶讀秒

<button type="button" value="返回首頁" id="prev"><span id="myspan">30</span>秒後返回首頁</button> 方式一： //定義函式 function coun

使用jsp的forward指令進行頁面跳轉時注意session物件的清除

在使用jsp的forward指令進行頁面跳轉時應該注意的問題：注意session物件的清除： <body> <% session.removeAttribute("user

HTML—js:利用History物件實現頁面跳轉

History常用的屬性和方法： length：返回瀏覽器歷史列表中的URL數量 back()：載入history列表中的前一個URL forward()：載入history列表中的下一個URL go()：載入history列表中的某個具體頁面程式碼： <!DOCT

vue使用路由進行頁面跳轉時傳遞引數

本文主要介紹了vue中使用路由進行頁面的跳轉時,vue的路由如何傳遞引數,第二個頁面如何獲取引數. 一. 通過router-link進行跳轉 <router-link :to=

前端框架Vue.js的使用及具體頁面跳轉時的引數傳遞

由於專案急且前端開發人員只會拼頁面具體資料互動不會，只能我後臺開發人員來寫。因為是資料互動使用的是ajax方式，我首先要面臨的問題是我獲得的資料怎麼顯示在頁面上，以及怎麼把資料儲存下來，等頁面跳轉時就不用向後臺再次請求資料，比如使用者名稱以帳號相關基礎資訊，不可能每次開啟新

js根據不同裝置進行頁面跳轉

相關推薦