請問各位大大,
我做了一個網站,然後我想要用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;
}
}
最簡單的方式就是這樣:
假設你要隱藏的元素是 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,
那這要怎麼辦呢?
最簡單暴力的就是 location.href = 網址(字串)
是直接打在if else的花括弧裡嗎?
是的,你的裝置判斷中
這樣是對的嗎?我用手機開沒有效果
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'
}
}
你這個 detectmob 方法有執行嗎?範例代碼看起來沒有
以及 if (這裡判斷可以簡寫成以下)
if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {
// ...
}
請問什麼是detectmob?要怎麼執行呢?
你有寫一個 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')
});
你是寫在 index.js 內吧?
我看你還是沒執行,你有更新線上的代碼嗎?
我點有跳轉啊 cache 吧
偵測是否為手機或平板
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
}
})