× 說心事 政治時事 生活 運動 汽車 機車 自行車 相機 科技 理財 旅遊美食 娛樂 健康 美麗時尚 人際關係 文學故事 關於《思書》
吃喝玩樂 關於《思書》


RWD 網頁在手機上討厭的左右滑動


紅寶鐵軌客
來關注...
關注:紅寶鐵軌客
關注有什麼好處?:當作者有新文章發佈時,「思書日報」就會匯總自動通知您,讓您更容易與作者互動。
x
紅寶鐵軌客
Rails 使用中,折磨中,享受中......
Victorian vintage round cut ruby engagement ring in 14k yellow gold 7mm center vs g h 984
    很久以前就是個「寫程式的」,其實,什麼程式都不熟⋯⋯
     
    就,這會一點點,那會一點點⋯⋯
作者最新發佈的文章:
  • 真不該直接用 JavaScript...
  • Rails 如何過濾你要的 HTML tag 內容
  • 要用 Faraday 還是 Net HTTP 呢?
作者最近參與的討論:
  • Rails 常見資安陷阱與解決方法
現在就加入《思書》,你就可以關注本作者了!
《思書》是一個每個人的寫作與論壇平台,特有的隱私管理,讓你寫作不再受限,討論更深入真實,而且免費。 趕快來試試!
還未加入《思書》? 現在就登錄! 已經加入《思書》── 登入
Rails 使用中,折磨中,享受中......
2017/11/07
391   0  


除非你設計的網頁是故意在手機上只要顯示一部分,一般在 RWD 網頁上,我們都會設成網頁同裝置寬度,就像下面的設定:

<meta name="viewport" content="width=device-width, initial-scale=1.0>

但是,很常常啊,就會發現咦?當使用者滑動網頁上下時,網頁也會稍微的左右滑動,整個網頁在手機上,就好像是停在一塊冰上,上下滑動時,連帶左右也會一起動,就有一種扭啊扭啊的感覺,真的很不好的使用者體驗,所以一定要改才上下滑動時,左右不要搖晃才行,怎麼改呢?

不容易,基本上就要一塊一塊的查網頁區塊的大小,有沒有哪一塊超過的,這裡是我發現的一些魔鬼細節,希望對辛苦的前端設計師有幫助,也希望這網上的能人異士,也能方想一下,因為這,算是 Bug 吧,還真是難抓。

  1. 查 padding,這東東當區塊設定為 100% 時,會讓區塊超過 100%,大部分時間 padding 又是空白的,所以不好找到超過的。
  2. 查 margin,這東東一般還好,但是如果有個區塊的 margin-left 或是 margin-right 設成“負”的時,那就有問題了,而且這個設定也是很難找到東東。

使用 Bootstrap 的人,很常會遇到有這左右搖晃的問題,主要的原因就是在 Bootstrap 的 .row 是設成:

.row {
margin-left: -15px;
margin-right: -15px;
}

Bootstrap 的文件其實說得很清楚,因為 .container_fluid 有 padding-left: 15px; padding-right: 15px; 所以會互相取消,但是啊,這樣就會造成上下滑動網頁時,左右會搖晃,有沒有解法呢?有,最簡單的方法就是蓋掉這些值,也有人說只要把 .row 包在 .container 或是 .container-fluid 就好,或是用 .clearfix 等等,各位就試試吧,蓋掉 .container_fluid 跟 .row 的 margin 與 padding 是最簡單的方法,但是你要好好的檢查你的網頁,有沒有“變形”,因為這原先的設定是為了要讓 .row 的內容會與網頁左右對齊。

常想,CSS 常常被這樣貼來蓋去的,總有一天會被玩壞,到時候,會不會效率變低到只有重練,那可是很可怕的。

關於作者
很久以前就是個「寫程式的」,其實,什麼程式都不熟⋯⋯
 
就,這會一點點,那會一點點⋯⋯


標籤: 網頁左右滑動 x 1 bootstrap x 2 rwd x 2 rails x 29

分享:


參與討論!
x
現在就加入《思書》,馬上參與討論!
《思書》是一個每個人的寫作與論壇平台,特有的隱私管理,用筆名來區隔你討論內容,讓你的討論更深入,而且免費。 趕快來試試!
還未加入《思書》? 現在就登錄! 已經加入《思書》── 登入