iT邦幫忙

0

網頁轉手機板的困擾

大家好:
想請教,我有一個網頁,用電腦開好好的(排版OK
但用手機開啟那網頁,發現他整排版個走鐘很嚴重...
不只如此,連我的背景圖他都變成一個一個的色塊

body {
 height: 1100px;
 background-repeat: no-repeat;
background:linear-gradient(56.31deg,#ff6b24  8.83%, #FFE53b 71.21%);
}

想請教各位大大,有沒有甚麼方法、工具,可以讓電腦版和手機顯示的網頁無縫接軌(不然真的差太多了....
謝謝大家

看更多先前的討論...收起先前的討論...
ccutmis iT邦高手 4 級 ‧ 2021-03-02 09:01:39 檢舉
有個笨方法就是在手機瀏覽器右上角的"..."裡面找到”電腦版網頁"
https://imgur.com/LyPunGU
那個點下去就會跟PC一樣了 不過這不是真正的解決方案 比較常見的是RWD網頁設計 不然就是更笨的方法:一個頁面設計各種平台的版本,在頁面判斷用戶的平台再決定載入哪個頁面。
LLL iT邦新手 5 級 ‧ 2021-03-02 09:04:08 檢舉
用 https://caniuse.com/
看看你的手機瀏覽器有沒有支援你的css屬性
手機瀏覽器裡大多有個"顯示成電腦版"的功能可以用,可以解決燃眉之急,至於手機版面的問題,建議使用bootstrap.js或其他框架做RWD,但....如果你不是設計者,那這事就不是你能克服的事了
神威 iT邦新手 1 級 ‧ 2021-03-02 09:12:28 檢舉
ccutmis你好,本人有導入boottrap,但背景色還是不OK
神威 iT邦新手 1 級 ‧ 2021-03-02 09:13:51 檢舉
japhenchen好,之前沒做手機板,現在開手機發現會跑掉,想改一下
神威: 建議不要改現有網頁,重做一個mobile.php/aspx/jsp/htm,然後在原來的網頁上做一個判斷agent的javascript跳轉到mobile的功能即可

手機版我的建議是不要使用滑鼠專有的hover/mousemove/mouseout事件,盡量不要使用table(純個人建議,跑版元兇),盡量不使用px固定尺寸,用em或全交給框架來處理,背景盡量用css處理,網頁盡量符合w3c標準,全HTML5
神威 iT邦新手 1 級 ‧ 2021-03-02 09:43:45 檢舉
japhenchen,了解,我再努力,想請教大大,background:linear-gradient(56.31deg,#ff6b24 8.83%, #FFE53b 71.21%);//body background color,這個顏色跑色有辦法解決嗎?謝謝
手機畫面的寬高你沒取得,又如何去設定height: 1100px?
神威 iT邦新手 1 級 ‧ 2021-03-02 11:35:10 檢舉
japhenchen,了解,我已參考ccutmis大大的方法,用"100%" 的方式解決問題,謝謝

1 個回答

5
ccutmis
iT邦高手 4 級 ‧ 2021-03-02 09:52:26
最佳解答

我剛才試了一下 發現是你的css寫法問題
你試試把

body {
 height: 1100px;
 background-repeat: no-repeat;
background:linear-gradient(56.31deg,#ff6b24  8.83%, #FFE53b 71.21%);
}

改成

body{background:linear-gradient(56.31deg,#ff6b24  8.83%, #FFE53b 71.21%) 100% 100% no-repeat fixed;}

應該就能正常運作(至少在我這邊測試是OK的),這個是很簡單的東西我就不弄demo了,希望有幫助~

註: css語法可以用縮寫的方式把 background-image background-size background-repeat...(略) 寫成一行(就是這邊的範例) 你要知道它們做了什麼事

看更多先前的回應...收起先前的回應...
神威 iT邦新手 1 級 ‧ 2021-03-02 10:37:08 檢舉

了解,感謝ccutmis大大指教,我只會分開寫,沒有用過縮寫,看來得再惡補一下
想再請教大大一個問題,如果我網頁上有一個box,500 X 500 px,電腦上OK,但手機上就會過大,請問大大,有辦法變成auto嗎?(例如手機就變成300X300之類的...
謝謝

ccutmis iT邦高手 4 級 ‧ 2021-03-02 10:55:16 檢舉

如果我網頁上有一個box,500 X 500 px,電腦上OK,但手機上就會過大...(略)

有喔... 可以參考 CSS3 Media Query
https://www.w3schools.com/css/css3_mediaqueries_ex.asp

神威 iT邦新手 1 級 ‧ 2021-03-02 11:33:59 檢舉

ccutmis 謝謝,我會試試看

ccutmis iT邦高手 4 級 ‧ 2021-03-02 11:34:32 檢舉

不客氣~

神威 iT邦新手 1 級 ‧ 2021-03-07 08:21:25 檢舉

japhenchen

重做一個mobile.php/aspx/jsp/htm,然後在原來的網頁上做一個判斷agent的javascript跳轉到mobile的功能即可

想請教大大,用javascript判斷有範例程式嗎?謝謝

ccutmis iT邦高手 4 級 ‧ 2021-03-07 09:34:16 檢舉

在原來的網頁上做一個判斷agent的javascript跳轉到mobile的功能即可

google找到的範例:

https://tso1158687.github.io/blog/2019/03/10/detect-mobile-device/

神威 iT邦新手 1 級 ‧ 2021-03-08 09:02:21 檢舉

ccutmis好:我參考了您找的的版本,了解大概的操作,因為我想用PHP,所以我就改去找PHP的東西
以下是我找到的資料,供有需要的大大參考
https://blog.aidec.tw/post/device-detect-php
謝謝大大

ccutmis iT邦高手 4 級 ‧ 2021-03-08 09:17:02 檢舉

感謝分享~
後端版本(server-side-script) 跟 前端版本(js) 各有其適用場景 確實能幫助到有需要的人~ 給您一個讚!

我要發表回答

立即登入回答