iT邦幫忙

0

jquery網頁在行動裝置上瀏覽時字體會忽大忽小

  • 分享至 

  • xImage

如題 這個網頁用電腦瀏覽沒問題 可是用行動裝置看字就會忽大忽小 測試了老半天也不知道到底是css還是html還是jquery的問題......

正常大小是這樣

用模擬器也是一樣的結果 橫屏沒問題
一切換到豎屏馬上問題就出來了

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

2 個回答

0
marlin12
iT邦研究生 5 級 ‧ 2018-09-27 20:46:53
最佳解答

原因是網頁沒有viewport meta,手機瀏覽器就會用電腦螢幕的寬度來渲染,然後縮放到手機屏幕大小,同時它會放大[它覺得需要放大]的文字。因為你這個網頁不斷地更新,它便不斷地[隨意]放大某些文字。

解決的方法有2個:
[方法1]在網頁裏加回viewport meta (但是你這個網頁不是responsive,這個方法不行。)

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

[方法2]用CSS去除這個功能

html, body {
  -webkit-text-size-adjust: none;
     -moz-text-size-adjust: none;
      -ms-text-size-adjust: none;
          text-size-adjust: none;  
}

[參考]
HTML 具有視口元標記
text-size-adjust

看更多先前的回應...收起先前的回應...

剛試了一下方法2問題真的解決了 太神奇了!

marlin12我能順便在問個問題嗎 就是時間那欄在中文板會變垂直的 英文板沒這問題

marlin12 iT邦研究生 5 級 ‧ 2018-09-28 22:04:33 檢舉

你是問為何欄內的"時間"會變垂直,而"Time"就不會嗎?
因為如果內容闊度大過欄寬時,瀏覽器便會自動換行。但是它只會在[字]和[字]之間換行,不會拆散一個[字]來換行。
對英文來說,任何連續的字母或連續的數字都會當作一個[字]{即是word}。因此"Time"是一個word,不會換行。
對中/日/韓文(CJK)來說,任何的字元都是一個[字],都可以換行。因此"時間"是2個[字],會在中間換行。("時間"看似變垂直,其實是變成2行。)

如果要防止在連續的中文字之間換行,可以用CSS的word-break:keep-all來設定。

.list th:last-of-type,
.list td:last-of-type,
#history_list th:first-of-type,
#history_list td:first-of-type,
#history_list th:last-of-type,
#history_list td:last-of-type {
    word-wrap: normal;
	word-break: keep-all;
}

剛試了一下目前問題看似解決了 不過這問題在request list為空行時最為明顯 所以到底有沒有效還是要等明天才知道

request list為空行了時間還是一樣沒變直的 看來是真的沒問題了 感謝大大又解決了我一個問題!

0

#request_list table, #song_list table {
font-size: 90%;
}

這裏最好不要這樣用。一但在手機做縮放處理時,很容易就會發生你上面的問題。
原因是你的td也並未是固定的寬度,會讓size的%數定義解釋錯誤。
由其是在手機上,還有縮放的問題。會更明顯。

看更多先前的回應...收起先前的回應...

那要如何解決? 刪掉也一樣無卵用
固定寬度我上面有設下面沒設所以下面也要設?

其實你的css我並沒有全看完。只是告訴你一下,一些css盡量避免的做法。
另外,你是否都是用你的手機在查看而已,有無試過其它手機的畫面??

你刪掉沒用的原因是,你的元件搭配的很差,會互相css干擾。
你多多善用一下f12查看你的元件對應的css。就可以明白問題所在了

刪除線劃掉的就是衝突到的? 還有我沒其他手機可測試......

放心,你的問題因該會跟jquery無直接關係。
只是很單純的css配置上的問題而已。這倒還不需要看到jquery程式。

我會說你沒在其它手機看的原因是,我試了模擬器看你的網頁,並沒有像你那麼明顯的情況。
所以會猜測你是否有用了手機本身的字體放大的機制。

這問題豎屏比較明顯 橫屏比較不明顯
字體放大? 我看看我有沒有開....
剛看了一下我應該是沒開類似功能.....

優悠 iT邦新手 3 級 ‧ 2018-09-26 11:45:23 檢舉

感覺你的手機有去設定字體大小,或是網站設定那邊看看

你們在手機上看都沒這問題?

會有字體不太平衡的問題存在,但不像你圖片上那樣誇張的大就是了。
這是我模擬器跟手機的實驗結果

我剛都確認過了字體大小是預設 瀏覽器字體大小也是100% 可還是有這問題 模擬器也試過了 一樣

不是已經跟你說不要用百分比的嗎??
善用f12去查問題啦。

#request_list table, #song_list table {
font-size: 90%;
}
這裏不是還有個90%的設定。

還有~~~我怎麼還能看到 font-size: auto; 這樣的鬼設定??
不要自已隨便配置css。

看你的css就很像是補破網式的。很容易發生相互干擾的問題。

那先把這兩個清除掉嗎 不要用百分比那用固定px?
f12我是有看到驚嘆號跟一些劃掉的......總之我就先改固定px跟把auto去掉好了

我要發表回答

立即登入回答