台灣最大程式設計社群網站
線上人數
1381
 
會員總數:246737
討論主題:190152
歡迎您免費加入會員
討論區列表 >> CSS/HTML5/Bootstarp >> 請問bootstrap如何都一直使用手機視窗大小
[]  
[我要回覆]
1
回應主題 加入我的關注話題 檢舉此篇討論 將提問者加入個人黑名單
請問bootstrap如何都一直使用手機視窗大小
價值 : 20 QP  點閱數:1774 回應數:9
樓主

阿優
初學者
117 182
3062 335
發送站內信

各位好,請問一卜,我用bootstrap在測試時如何一直保持手機模式大小,不要因為瀏覽器寛度改變而去調整他顯示方式

想要固定顯示方式

他好像是去呼叫bootstrap-theme.min.css 這支,但就不佑要改哪了~~

搜尋相關Tags的文章: [ bootstrap ] ,
本篇文章發表於2016-04-20 17:51
1樓
回應

彩虹
檢舉此回應
如果你是使用google chrome瀏覽器
你可以按下「F12」按鍵,開啟「開發者工具」,在點選右下角左邊數來第二個,就可以是手機模式了

如圖,甚至還能選擇手機型號~
本篇文章回覆於2016-04-20 18:23
== 簽名檔 ==
--未登入的會員無法查看對方簽名檔--
2樓
作者回應

阿優
檢舉此回應
謝謝回應

我的意思是,當別人連到我網站時,也是維持手機大小模式
本篇文章回覆於2016-04-20 19:52
== 簽名檔 ==
--未登入的會員無法查看對方簽名檔--
3樓
回應

彩虹
檢舉此回應
「我的意思是,當別人連到我網站時,也是維持手機大小模式」
這是不可能的~,你應該也沒看過吧
Bootstrap是一個RWD(響應式)框架
而所謂的RWD響應式(自適應)網頁,顧名思義就是會依照你的畫面寬度大小來做縮放呈現

如果你確定要有手機的格局,你只能做個iframe框框
然後設定寬度並引入頁面進來,就可以達到你要的效果,但用手機看的時候就會跑掉

完成後大概就像這個網站一樣,請點此連結
http://design.google.com/resizer/#device=handset&width=360
你可以在框框輸入你的網址,例如:「https://kkbruce.tw/bs3/」 (Bootstrap 3),將會呈現手機模式
如圖,右上角還可以轉換模式


如果你是要給你的客戶看,你可以直接提供連結網址給他
http://design.google.com/resizer/#device=handset&url=https%3A%2F%2Fkkbruce.tw%2Fbs3%2F

本篇文章回覆於2016-04-20 20:59
== 簽名檔 ==
--未登入的會員無法查看對方簽名檔--
4樓
作者回應

阿優
檢舉此回應
會這樣改的原因是我遇到一個問題蠻怪的明明是用RWD設計,但用手機看確沒有自行縮排,變成很像用電腦版看一樣

http://case.acsite.org/M-B-U/order.php
本篇文章回覆於2016-04-20 21:57
== 簽名檔 ==
--未登入的會員無法查看對方簽名檔--
5樓
回應

彩虹
檢舉此回應
剛剛幫您大致瀏覽後,都蠻正常的耶~
你可以實際說一下是哪個頁面出現什麼快現象嗎~ ((可以的話,用手機截圖下來))
本篇文章回覆於2016-04-20 22:11
== 簽名檔 ==
--未登入的會員無法查看對方簽名檔--
6樓
作者回應

阿優
檢舉此回應
用手機看就會有問題了,圖片應該要由上而下,但用手機看變成一排3個圖
本篇文章回覆於2016-04-20 23:09
== 簽名檔 ==
--未登入的會員無法查看對方簽名檔--
7樓
作者回應

阿優
檢舉此回應
http://case.acsite.org/a1.jpg 在電腦模擬成手機大小  

http://case.acsite.org/a2.jpg 用手機去看變成很電腦版?? 照理說rwd不是會縮排嗎
本篇文章回覆於2016-04-20 23:19
== 簽名檔 ==
--未登入的會員無法查看對方簽名檔--
8樓
最有價值解答

彩虹
檢舉此回應
因為你有些頁面在<head>裡面,少了一個很重要的設定「viewport」
<meta name="viewport" content="width=device-width, initial-scale=1">」 這一行是最重要的
主要是用來讓行動裝置呈現最佳的顯示效果

後來點到你其他頁面的時候,還真的很多頁少了這一行,所以當你用手機看的時候,就沒有效果

你原本長這樣


請補上成這樣
本篇文章回覆於2016-04-21 07:45
== 簽名檔 ==
--未登入的會員無法查看對方簽名檔--
9樓
作者回應

阿優
檢舉此回應
太神了~~可以了~~~感謝~~
本篇文章回覆於2016-04-21 08:56
== 簽名檔 ==
--未登入的會員無法查看對方簽名檔--
   
1

回覆
如要回應,請先登入.