iT邦幫忙

0

請問是否有瀏覽器API，能將瀏覽器變成手機界面?

html 前端
小MIS 2024-08-20 08:29:43 ‧ 1914 瀏覽

  • 分享至 

  • xImage

目前按F12加點手機界面按鈕可以做到
但想要用戶在js client端也能顯示這樣的界面
image

目前RWD無法做到電腦用戶一開始瀏覽就顯示手機格式

看更多先前的討論...收起先前的討論...
yee0328 iT邦新手 5 級 ‧ 2024-08-20 09:11:55 檢舉
這個不是用RWD做ㄇ
依照螢幕尺寸去做縮放
小MIS iT邦研究生 1 級 ‧ 2024-08-20 09:28:25 檢舉
您好，目前RWD無法做到電腦用戶一開始瀏覽就顯示手機格式
froce iT邦大師 1 級 ‧ 2024-08-20 09:35:38 檢舉
…RWD就是依照裝置銀幕大小去呈現不同的版面，你要這種功能要設計專門的網址給手機版用。
這不是你想的調一個js函式就能做的。
小MIS iT邦研究生 1 級 ‧ 2024-08-20 10:23:54 檢舉
我有做RWD，想要統一電腦端也顯示手機格式
archer9080 iT邦研究生 3 級 ‧ 2024-08-20 10:45:05 檢舉
>>>有做RWD，統一電腦端也顯示手機格式
??????

兩句話分開看能看懂，合起來怎就好像哪裡怪怪的
froce iT邦大師 1 級 ‧ 2024-08-20 10:57:22 檢舉
https://ithelp.ithome.com.tw/m/questions/10216235
https://ithelp.ithome.com.tw/questions/10216235

來，你自己比一下。
RWD就是依照銀幕大小自己去做版面呈現，只有一種設計。基本上不會有額外的網址。
Ithelp這是兩種版面設計，分別有兩個網址。
froce iT邦大師 1 級 ‧ 2024-08-20 11:00:12 檢舉
》我有做RWD，想要統一電腦端也顯示手機格式
那你做RWD幹嘛？同一用手機版面就好啦？
小MIS iT邦研究生 1 級 ‧ 2024-08-20 12:02:12 檢舉
對，想只做手機版面，但通常放在瀏覽器瀏覽就會被左右拉長，跑版
IT邦也有這問題
WUcheap iT邦研究生 5 級 ‧ 2024-08-20 13:32:18 檢舉
會被左右拉長......那直接指定寬度不就好了
froce iT邦大師 1 級 ‧ 2024-08-20 16:13:31 檢舉
》對，想只做手機版面，但通常放在瀏覽器瀏覽就會被左右拉長，跑版
IT邦也有這問題

人家手機版就是要給手機看的，那裡有問題？
一般螢幕放直式版面，你不覺得留白這麼多更奇怪？
re.Zero iT邦研究生 5 級 ‧ 2024-08-21 00:22:03 檢舉
@小MIS : 該不會是， 你想採用某個具 RWD 功能的 framework 之「樣式」， 但不想要 Responsive(適應) 功能？
不然怎會有， 使用 RWD 卻不想要「對應不同的顯示環境使用適當的樣式」這個 RWD 的主要功能？
另， 想控制網頁內容大小、排版等， 建議使用 CSS 控制； 除非你想做複雜的動態樣式操作。
窮嘶發發發 iT邦高手 1 級 ‧ 2024-08-21 17:07:18 檢舉
樓下給了兩張圖
第一種不解釋
第二種 自己寫 CSS，把 body 寬度跟最大寬度定義成 100VW 就搞定了，然後你視窗縮小他就會自適應寬度
個人只能說 ITHELP 的CSS 寫的不怎麼樣，否則他不會做電腦版跟移動版兩個不同的版面
㊣浩瀚星空㊣ iT邦大神 1 級 ‧ 2024-08-22 16:28:14 檢舉
這種問題，說真的我還真不知道該怎麼回答就是了。
想要電腦也用手機畫面???
那不就直接用現成的手機樣式不就行了嘛??

至於兩邊會留白。你把螢幕轉直了看就好了。

這還要啥API???又沒有要任何判斷。要API幹啥?
小MIS iT邦研究生 1 級 ‧ 2024-08-22 16:54:12 檢舉
主要能專心手機格式調整，不用擔心到電腦端看到的效果跟手機不一樣
謝謝大家，目前還是要寫css最大寬度來調整
登入發表討論
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

2 個回答

2
WUcheap
iT邦研究生 5 級 ‧ 2024-08-20 09:11:55
最佳解答

使用 Window.resizeTo()就能調整視窗的大小
https://developer.mozilla.org/zh-CN/docs/Web/API/Window/resizeTo

看更多先前的回應...收起先前的回應...
小MIS iT邦研究生 1 級 ‧ 2024-08-20 09:31:37 檢舉

image 您好，好像沒有效果

WUcheap iT邦研究生 5 級 ‧ 2024-08-20 10:27:29 檢舉

您好，就算顯示undefined但是可以作用的唷
前提是使用window.open的視窗
另外如果你是用別人網頁測試，你不會知道他前端框架的處理機制或限制
如果單純想要視覺是一長條的一站式網站，建議直接從框架本身的RWD去做設計，直接限定寬度或網格

froce iT邦大師 1 級 ‧ 2024-08-20 12:02:30 檢舉

1 undefined是指回傳值，window.open本來就不會有回傳值當然是undefined
2 我記得視窗最大化或是全銀幕模式是不能靠resizeTo去改，不確定。
但我相信這也不是他要的

窮嘶發發發 iT邦高手 1 級 ‧ 2024-08-21 16:40:55 檢舉

這種效果嘛 ?
https://ithelp.ithome.com.tw/upload/images/20240821/20097082JLo1tkfosA.jpg

窮嘶發發發 iT邦高手 1 級 ‧ 2024-08-21 17:02:22 檢舉

還是這種效果?
https://ithelp.ithome.com.tw/upload/images/20240821/20097082yitnSA5NiL.png

窮嘶發發發 iT邦高手 1 級 ‧ 2024-08-21 17:14:42 檢舉

/m/questions/10216235 手機板面 + Body CSS 改 寬度 跟 最大寬度 100VW 結果
https://ithelp.ithome.com.tw/upload/images/20240821/20097082j5oUzCrKXB.png

登入發表回應
0
greenriver
iT邦研究生 4 級 ‧ 2024-08-23 10:37:27

html的結構如下

<body>
    <main>
       <!-- 內容 -->
    </main>
</body>

css設定如下， max-width 設定市面上手機最大的寬度

body{
    background-color: black;
}
main{
    background-color: black;
    max-width: 640px;
    margin: auto;
}

這樣就能讓桌機跟手機，開起來的效果一樣，
設定相同的 background-color 可以讓桌機版網頁留白的部分，不要太明顯。
但是看起來還是會怪怪的

登入發表回應

我要發表回答

立即登入回答
iThome鐵人賽
參賽組數
1064 組
團體組數
40 組
累計文章數
22199 篇
完賽人數
602 人
iT+看影片追技術 看影片追技術 看更多
熱門tag 看更多
15th鐵人賽 16th鐵人賽 13th鐵人賽 14th鐵人賽 12th鐵人賽 11th鐵人賽 鐵人賽 2019鐵人賽 javascript 2018鐵人賽 python 2017鐵人賽 windows php c# windows server linux css react vue.js
熱門問題
熱門回答
熱門文章
IT邦幫忙