iT邦幫忙

0

依用戶的裝置決定背景顏色

  • 分享至 

  • xImage

請問各位大大,
我做了一個網站,然後我想要用JS判斷:
如果用戶使用的裝置是行動裝置(手機、平板等),
則改變背景的顏色和讓所有東西隱藏(我的預想是用display: none),
我目前已經寫好了判斷裝置的JS(其實是在網路上找的),
但不知道要怎麼用JS改變背景顏色和隱藏所有東西,
請問各位大大有什麼方法嗎?

HTML程式碼(body內):

  <nav class="nav"> 
              <a class="bar_a" id="bar_a1" aria-current="page" target='_self' href="index.html">部落格</a>
              <a class="bar_a" id="bar_a2" aria-current="page" target='_self' href="../服務/indexService.html">服務</a>
              <a class="bar_a" id="bar_a3" aria-current="page" target='_self' href="../關於/indexAbout.html">關於Inspi.</a>
            </div>
        </nav>
        


          <img src="https://i0.zi.org.tw/kocpc/2021/07/1625708401-00890058e5109063effb7c201d1c1345.jpg" id="img20210813" class="all20210813">
          <div id="fixing">此頁面尚在開發中,敬請期待!</div>

CSS程式碼:

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}





/***WhenItLoadingh***/
.loading{
  cursor: wait;
}




/***操作區***/
img{
  user-select: none;
  -webkit-user-drag: none;
}
.ifMoble{
  background-color: gray;
}
.nav {
  background: rgb(120, 155, 103);
  display: flex;
  align-items: center;
  user-select: none;
  -webkit-user-drag: none;
  height: 90px;
}
.bar_a {
  color: #fff;
  text-decoration: none;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 400;
  font-size: 19px;
  margin: 0 24px;
  font-size: 33px;
  padding: 9px 24px;
  border: 8px solid transparent;
  border-radius: 32px;
  transition: .13s;
  position: relative;
  left: 5%;
  user-select: none;
  -webkit-user-drag: none;
}
.bar_a#bar_a1 {
  border: 8px solid rgb(156, 197, 138);
  
}
.bar_a#bar_a1:hover {
  border-color: rgb(169, 212, 149);
  transition: .13s;
}
.bar_a:hover {
  border-color: rgb(133, 172, 117);
}

/***部落格***/
/***2021 08 13***/
#img20210813{
    width: 300px;
    height: 200px;
    border-radius: 10px;
    position: fixed;
    top: 160px;
    left: 60px;
    vertical-align: text-top;

    display: none;
}
#word20210813{
    position: relative;
    bottom: 20%;
    left: 50%;
}
#fixing{
  font-size: 70px;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 400;
  color: rgb(133, 172, 117);
  text-align: center;
  justify-content: center;
}

JS程式碼:

window.addEventListener('load', function(){
  $('html').toggleClass('loading')
});
function detectmob() { 
  if( navigator.userAgent.match(/Android/i)
  || navigator.userAgent.match(/webOS/i)
  || navigator.userAgent.match(/iPhone/i)
  || navigator.userAgent.match(/iPad/i)
  || navigator.userAgent.match(/iPod/i)
  || navigator.userAgent.match(/BlackBerry/i)
  || navigator.userAgent.match(/Windows Phone/i)
  ){
    return true;
   }
  else {
     return false;
   }
 }
 
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

2 個回答

0
frank575
iT邦新手 4 級 ‧ 2021-08-18 21:22:23

最簡單的方式就是這樣:

假設你要隱藏的元素是 nav,你就在 nav 上掛 id 或是什麼專屬類名或其他可以判斷的參數,比方說:

<!-- 我把要隱藏的元素寫入 m-hidden 的 class 名稱 -->
<nav class="nav m-hidden"><!-- ... --></nav>
if (裝置判斷) {
  Array.from(document.querySelectorAll('.m-hidden')).forEach(el => {
    el.style.display = 'none' // 將所有 .m-hidden 類名的元素添加 display none 的樣式
    // el.classList.add('hidden') // 建議使用掛 className 的方式,記得在 style 裡寫 .hidden { display: none; }
  })
}

至於色系切換其實寫法大同小異,可以直接在跟標籤或是 body 上添加暗色系的 className,如下:

<!-- 日間模式(原本) -->
<body><!-- ... --></body>

<!-- 由 dark 類名判斷為黑夜模式 -->
<body class="dark"><!-- ... --></body>

這時候就能在 style 寫上對應的樣式,比方說:

// 你的 nav 日間模式為該背景色
.nav {
  background: rgb(120, 155, 103);
}

// 夜間模式使用 dark 來向下寫,權重較大,所以能蓋過日間模式的樣式
.dark .nav {
  background: red;
}

添加 dark 的 js:

if (裝置判斷) {
  document.body.classList.add('dark')
}
看更多先前的回應...收起先前的回應...

那假設我不要那麼麻煩,我想讓js判斷:
當用戶的裝置是行動裝置(手機、平板等)時,
讓用戶引入 / 進入另一個連結 / link,
那這要怎麼辦呢?

frank575 iT邦新手 4 級 ‧ 2021-08-18 22:56:18 檢舉

最簡單暴力的就是 location.href = 網址(字串)

是直接打在if else的花括弧裡嗎?

frank575 iT邦新手 4 級 ‧ 2021-08-18 23:01:24 檢舉

是的,你的裝置判斷中

這樣是對的嗎?我用手機開沒有效果
JS程式碼:

window.addEventListener('load', function(){
  $('html').toggleClass('loading')
});

function detectmob() { 
  if( navigator.userAgent.match(/Android/i)
  || navigator.userAgent.match(/webOS/i)
  || navigator.userAgent.match(/iPhone/i)
  || navigator.userAgent.match(/iPad/i)
  || navigator.userAgent.match(/iPod/i)
  || navigator.userAgent.match(/BlackBerry/i)
  || navigator.userAgent.match(/Windows Phone/i)
  ){
    location.href = 'https://ithelp.ithome.com.tw/questions'
   }
   else{
     location.href = 'https://inspi.cf'
   }
 }
frank575 iT邦新手 4 級 ‧ 2021-08-19 09:59:38 檢舉

你這個 detectmob 方法有執行嗎?範例代碼看起來沒有

frank575 iT邦新手 4 級 ‧ 2021-08-19 10:00:24 檢舉

以及 if (這裡判斷可以簡寫成以下)

if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {
  // ...    
}

請問什麼是detectmob?要怎麼執行呢?

frank575 iT邦新手 4 級 ‧ 2021-08-19 10:23:09 檢舉

你有寫一個 function detectmob() { /* ... */ },這個是一個 function 也就是你定義了一個函數,函數要使用()執行

function detectmob() {
  if(/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)){
    location.href = 'https://ithelp.ithome.com.tw/questions'
  } else{
    location.href = 'https://inspi.cf'
  }
}

// 你要 () 執行那麼這個裝置判斷的代碼才會被執行
// 不然你只是寫著放著而已,沒有處理該程式碼
detectmob() 

我執行了函式,但用手機開,還是無法進入'https://ithelp.ithome.com.tw/questions',請問您能幫我看看嗎?

網站網址:https://inspi.cf

JS程式碼:

function detectmob() {
  if(/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)){
    location.href = 'https://ithelp.ithome.com.tw/questions'
  } else{
    location.href = 'https://inspi.cf'
  }
}
detectmob()

window.addEventListener('load', function(){
  $('html').toggleClass('loading')
});
frank575 iT邦新手 4 級 ‧ 2021-08-19 11:13:47 檢舉

你是寫在 index.js 內吧?
我看你還是沒執行,你有更新線上的代碼嗎?

我點有跳轉啊 cache 吧

是的,我是寫在index.js,應該也有更新到線上代碼,
因為我有將主機內的所有檔案/資料夾重新整理,
我電腦這裡也有將網站強制重新整理

frank575 iT邦新手 4 級 ‧ 2021-08-19 13:27:48 檢舉

有正常跳轉呀,你把cache刷掉吧,或是用無痕開

frank575 iT邦新手 4 級 ‧ 2021-08-19 13:29:16 檢舉

然後把 else 拔掉,像下面這樣,不然 PC 端會多餘跳轉

if(/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)){
  location.href = 'https://ithelp.ithome.com.tw/questions'
}
1
japhenchen
iT邦超人 1 級 ‧ 2021-08-19 09:11:12

偵測是否為手機或平板

function detectMob() {
    const toMatch = [
        /Android/i,
        /webOS/i,
        /iPhone/i,
        /iPad/i,
        /iPod/i,
        /BlackBerry/i,
        /Windows Phone/i
    ];

    return toMatch.some((toMatchItem) => {
        return navigator.userAgent.match(toMatchItem);
    });
}

把偵測放在你的載入完成的script裡

window.addEventListener('load', function(){
  $('html').toggleClass('loading')
});

//我還是建議放在ready裡,發生在頁面全部都載入完成之後
$.ready(function(){
  if(detectMob()){      
      //$("*").remove(); //移除任何東西
      $("*").css("display","hidden"); //藏起來  
      $("body").css("background-color","#000000"); //讓網頁底色變黑的
      // ...etc...      
      // window.location.href = "https://ithelp" ; // or what you want 
  }
})

我要發表回答

立即登入回答