手機版網頁長寬設定問題

看板Web_Design作者 (hippo泡)時間9年前 (2015/10/08 00:13), 編輯推噓2(209)
留言11則, 1人參與, 最新討論串1/1
請問前輩們 我今天在做手機板網頁時 發現我用chrome模擬的情況跟手機實際看到的情況並不一樣 例如我設200px chrome看ok 但到手機上後 畫面確變很小 有兩個問題 1.手機版的元件是否都要改用%數來設定呢 2.字型也需要更改? -- Sent from my Android -- ※ 發信站: 批踢踢實業坊(ptt.cc), 來自: 36.225.20.76 ※ 文章網址: https://www.ptt.cc/bbs/Web_Design/M.1444234439.A.B74.html

10/08 09:50, , 1F
用%數可以針對比例不同情況改變,但不是所有情況都適用
10/08 09:50, 1F

10/08 09:51, , 2F
Chrome純粹拉小畫面與用F12的手機模擬看到的結果也不同
10/08 09:51, 2F

10/08 09:52, , 3F
既然有手機,實際用手機去看應該最準確XD
10/08 09:52, 3F

10/08 09:53, , 4F
字型的話我會設定手機板字型稍微小一點,避免擠不下
10/08 09:53, 4F

10/08 09:54, , 5F
可是也要考慮螢幕已經很小了,字太小就看不到字了
10/08 09:54, 5F

10/08 09:54, , 6F
視情況與你的排版,說不定你應該在手機板使用更大的字
10/08 09:54, 6F

10/08 09:56, , 7F
實際在手機上控制,稍微拿遠一點看效果,就知道怎麼改了
10/08 09:56, 7F

10/08 11:24, , 8F
歐對了還有個問題,就是viewport
10/08 11:24, 8F

10/08 11:24, , 9F
<meta name="viewport" content="width=device-width">
10/08 11:24, 9F

10/08 11:25, , 10F
把這個加在你網頁中的Head區段內
10/08 11:25, 10F

10/08 11:25, , 11F
表示如果是手機查看網頁,就要套用手機版適用大小
10/08 11:25, 11F
文章代碼(AID): #1M5KJ7jq (Web_Design)
文章代碼(AID): #1M5KJ7jq (Web_Design)