iT邦幫忙

1

css 手機頁面過寬,旋轉跑版

css
Zaku 2018-10-05 14:29:475526 瀏覽
  • 分享至 

  • xImage

請問手機看網頁時剛進去頁面都會超出可視範圍,需要手動去拉一下縮小,他才會自動彈跳剛好滿版,像是iphone是兩隻手指去拉動往內縮,測了width: 100% ,width: 100vw,好像也無法解決,最外層有box-sizing: border-box。

另一個問題是手機旋轉,直轉橫,再轉回直立,基本上頁面就炸出去了,有辦法css面解決?還是需要js一直去偵測畫面?手機手持一定都會晃來晃去。

圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 個回答

0

rwd, bootstrap~

看更多先前的回應...收起先前的回應...
Zaku iT邦新手 3 級 ‧ 2018-10-05 15:16:13 檢舉

已經有rwd喔

mayyola iT邦研究生 2 級 ‧ 2018-10-05 16:37:35 檢舉
用$( window ).resize(function(){}); 偵測跟加CSS

一般如果會發生你的情況,就最好不要說你有做好rwd了。
因為有做好rwd的話,並不會發生這樣的情況。

正確的rwd是要用css配版好任意尺寸解析都能正常的。
部份特規會比較沒辦法的。就可能得要利用一下js幫忙控制一下。如橫式選單因寬度不足的情況下,改換成直式彈跳選單。

不過感覺你的問題好像有點出入。不是很單純的瀏覽器問題。
你這樣的情況是否是app的webview的問題。並不是網頁設計上的問題??

因為你並沒說清楚。我擔心的是,其實你碰上的是webview的問題。跟網頁設計無關。

froce iT邦大師 1 級 ‧ 2018-10-05 17:16:54 檢舉

清了body預設的padding和margin嗎?

Zaku iT邦新手 3 級 ‧ 2018-10-05 17:51:39 檢舉

to浩瀚星空:恩,我的意思說,如果你用chrome的開發模式去開手機模式瀏覽,基本上是滿版的沒問題,css是有偵測到手機size,但手機開就是或超出手機可視的範圍。webview的問題是?

Zaku iT邦新手 3 級 ‧ 2018-10-05 17:58:06 檢舉

to:froce 有喔,看起來不像是預設的padding,有放box-sizing: border-box,頂多就是有白邊,但她是會向右再多延伸出去。狀況是手指去縮到最小再放開,是會再彈成滿版的。

如果並非是因為使用app中的webview的問題。還是發生在手機的chrome瀏覽器顯示的問題情況。
那基本上來說,你光一打開網頁就需要做縮小這樣的動作。其就已經是代表你的rwd的規劃並未處理好。
因為一般所謂的rwd,就是光初始開頁面。就不該發生框架突出的問題才對。

你或許可以看看是否能提供連結。可利判斷處理。
基本上的chrome開發模式,這些都也只能是參考。在使用開發模式檢查時,你本身也需要確定一些問題存在。如字體的放大倍率。
因為手機是可以調整框架及字體的放大縮小倍率。
這些都是多少會影響到你原本的頁面排版問題。

在來就是在設計上,是否採用純div的設計。如果有使用到table等這樣的原件拿來當排版元件。本身就很容易被這種會自我調整元件的東西去破壞掉你原先規劃好的rwd。這些都是要去注意到的問題。

可以的話,將你目前有問題的網頁,看是否可以提供給我對應查看。以利看出問題點在哪。正常使用f12大法檢查對應。還是需要學會一些特規的檢查方式才行。不要說看起來沒事就沒事。畢竟那也不過是一種模擬。

Zaku iT邦新手 3 級 ‧ 2018-10-08 17:12:46 檢舉

感謝大大,但如果是因為字體太大,開chrome開發工具模式應該就會有問題了?都是div沒有早期的table排版。恩,不是說看起來沒事就沒事,所才用手機去測,所以才發現這問題。請問特規的檢查法是?我再試試,不行再生一個網址給大大。不知道會不會是scroll的問題

Zaku iT邦新手 3 級 ‧ 2018-10-12 10:28:07 檢舉

發現是點燈入表單後,瀏覽器會自動幫你放大畫面,放大表單的位置方便你輸入,登入成功轉跳後畫面就還是那麼大,可能單頁式網頁的關係。畫面旋轉成橫幅之後,畫面會自動放大,在轉回來後,畫面就不會縮回去了,要自己寫js去偵測?

我要發表回答

立即登入回答