網頁轉手機板的困擾

網頁手機板 php html

神威 2021-03-02 08:43:22 ‧ 4579 瀏覽

分享至

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

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

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

看更多先前的討論...收起先前的討論...

ccutmis iT邦高手 2 級 ‧ 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屬性

japhenchen iT邦超人 1 級 ‧ 2021-03-02 09:10:50 檢舉

手機瀏覽器裡大多有個"顯示成電腦版"的功能可以用，可以解決燃眉之急，至於手機版面的問題，建議使用bootstrap.js或其他框架做RWD，但....如果你不是設計者，那這事就不是你能克服的事了

神威 iT邦研究生 4 級 ‧ 2021-03-02 09:12:28 檢舉

ccutmis你好，本人有導入boottrap，但背景色還是不OK

神威 iT邦研究生 4 級 ‧ 2021-03-02 09:13:51 檢舉

japhenchen好，之前沒做手機板，現在開手機發現會跑掉，想改一下

japhenchen iT邦超人 1 級 ‧ 2021-03-02 09:28:21 檢舉

神威: 建議不要改現有網頁，重做一個mobile.php/aspx/jsp/htm，然後在原來的網頁上做一個判斷agent的javascript跳轉到mobile的功能即可

手機版我的建議是不要使用滑鼠專有的hover/mousemove/mouseout事件，盡量不要使用table(純個人建議，跑版元兇)，盡量不使用px固定尺寸，用em或全交給框架來處理，背景盡量用css處理，網頁盡量符合w3c標準，全HTML5

神威 iT邦研究生 4 級 ‧ 2021-03-02 09:43:45 檢舉

japhenchen，了解，我再努力，想請教大大，background:linear-gradient(56.31deg,#ff6b24 8.83%, #FFE53b 71.21%);//body background color，這個顏色跑色有辦法解決嗎?謝謝

japhenchen iT邦超人 1 級 ‧ 2021-03-02 10:34:55 檢舉

手機畫面的寬高你沒取得，又如何去設定height: 1100px?

神威 iT邦研究生 4 級 ‧ 2021-03-02 11:35:10 檢舉

japhenchen，了解，我已參考ccutmis大大的方法，用"100%" 的方式解決問題，謝謝

登入發表討論

直播研討會

{{ item.channelVendor }} {{ item.webinarstarted }} |

直播中

1 個回答

ccutmis

iT邦高手 2 級 ‧ 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...(略) 寫成一行(就是這邊的範例) 你要知道它們做了什麼事

回應 8
分享
檢舉

看更多先前的回應...收起先前的回應...

神威 iT邦研究生 4 級 ‧ 2021-03-02 10:37:08 檢舉

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

ccutmis iT邦高手 2 級 ‧ 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邦研究生 4 級 ‧ 2021-03-02 11:33:59 檢舉

ccutmis 謝謝，我會試試看

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

不客氣~

神威 iT邦研究生 4 級 ‧ 2021-03-07 08:21:25 檢舉

japhenchen

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

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

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

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

google找到的範例:

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

神威 iT邦研究生 4 級 ‧ 2021-03-08 09:02:21 檢舉

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

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

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

登入發表回應

我要發表回答

立即登入回答

參賽組數

1064 組

團體組數

40 組

累計文章數

22200 篇

完賽人數

602 人

15th鐵人賽 16th鐵人賽 13th鐵人賽 14th鐵人賽 12th鐵人賽 11th鐵人賽鐵人賽 2019鐵人賽 javascript 2018鐵人賽 python 2017鐵人賽 windows php c# windows server linux css react vue.js

IT邦幫忙