如題 這個網頁用電腦瀏覽沒問題 可是用行動裝置看字就會忽大忽小 測試了老半天也不知道到底是css還是html還是jquery的問題......
正常大小是這樣
用模擬器也是一樣的結果 橫屏沒問題
一切換到豎屏馬上問題就出來了
已邀請的邦友 {{ invite_list.length }}/5
原因是網頁沒有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;
}
你是問為何欄內的"時間"會變垂直，而"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為空行了時間還是一樣沒變直的 看來是真的沒問題了 感謝大大又解決了我一個問題!
#request_list table, #song_list table {
font-size: 90%;
}
這裏最好不要這樣用。一但在手機做縮放處理時，很容易就會發生你上面的問題。
原因是你的td也並未是固定的寬度，會讓size的%數定義解釋錯誤。
由其是在手機上，還有縮放的問題。會更明顯。
那要如何解決? 刪掉也一樣無卵用
固定寬度我上面有設下面沒設所以下面也要設?
其實你的css我並沒有全看完。只是告訴你一下，一些css盡量避免的做法。
另外，你是否都是用你的手機在查看而已，有無試過其它手機的畫面??
你刪掉沒用的原因是，你的元件搭配的很差，會互相css干擾。
你多多善用一下f12查看你的元件對應的css。就可以明白問題所在了
刪除線劃掉的就是衝突到的? 還有我沒其他手機可測試......
放心，你的問題因該會跟jquery無直接關係。
只是很單純的css配置上的問題而已。這倒還不需要看到jquery程式。
我會說你沒在其它手機看的原因是，我試了模擬器看你的網頁，並沒有像你那麼明顯的情況。
所以會猜測你是否有用了手機本身的字體放大的機制。
這問題豎屏比較明顯 橫屏比較不明顯
字體放大? 我看看我有沒有開....
剛看了一下我應該是沒開類似功能.....
感覺你的手機有去設定字體大小，或是網站設定那邊看看
你們在手機上看都沒這問題?
會有字體不太平衡的問題存在，但不像你圖片上那樣誇張的大就是了。
這是我模擬器跟手機的實驗結果
iThome鐵人賽
看影片追技術