iT邦幫忙

1

如何 Bootstrap 用電腦瀏覽也是手機樣式

web
  • 分享至 

  • xImage

如何 Bootstrap 用電腦瀏覽也是手機樣式
想要在電腦瀏覽器全屏瀏覽也是顯示這樣效果
image

用這個外掛 User-Agent Switcher for Chrome ,要記得去更新他的 瀏覽器的 JSON 才會有完整的瀏覽器支援
https://chrome.google.com/webstore/detail/user-agent-switcher-for-c/djflhoibgkdhkhhcedjiklpkjnoahfmg
小MIS iT邦研究生 1 級 ‧ 2023-01-23 15:58:46 檢舉
謝謝您
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中
1
greenriver
iT邦研究生 4 級 ‧ 2023-01-17 15:55:53
最佳解答

結構不變

<body>
    <main>
        ...
    </main>
</body>

設定最外層的body寬度即可,

<style>
body{
    width:100%;
    max-width:640px; //這個
}
</style>
小MIS iT邦研究生 1 級 ‧ 2023-01-23 15:58:51 檢舉

謝謝您

3
allenlwh
iT邦高手 1 級 ‧ 2023-01-17 15:52:35

按下F12

https://ithelp.ithome.com.tw/upload/images/20230117/20033493M85OsVUKbX.jpg

2

正常來說,Bootstrap 是用寬度來做處理居多。
所以如果是想要在PC瀏覧器就呈現手機的樣式,一般最快的方式就是直接限制BODY寬度處理。

但如果只是單純的想要模擬。最好還是直接使用F12的裝置模擬處理。
裏面可以直接限制寬高。而不是直接去改BODY。

我要發表回答

立即登入回答