iT邦幫忙

0

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

  • 分享至 

  • 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 控制; 除非你想做複雜的動態樣式操作。
樓下給了兩張圖
第一種不解釋
第二種 自己寫 CSS,把 body 寬度跟最大寬度定義成 100VW 就搞定了,然後你視窗縮小他就會自適應寬度
個人只能說 ITHELP 的CSS 寫的不怎麼樣,否則他不會做電腦版跟移動版兩個不同的版面
這種問題,說真的我還真不知道該怎麼回答就是了。
想要電腦也用手機畫面???
那不就直接用現成的手機樣式不就行了嘛??

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

這還要啥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去改,不確定。
但我相信這也不是他要的

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

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

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

0
greenriver
iT邦研究生 5 級 ‧ 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 可以讓桌機版網頁留白的部分,不要太明顯。
但是看起來還是會怪怪的

我要發表回答

立即登入回答