[工具方法]_真正實現行動端口的自適應(只要一行代碼!)

Published on:

如果按照劉同學所提供的教學:【简单实用】三步做出全栈营的汉堡响应式导航条
做完的話,再緊接著一起真正實現行動端口的自適應吧!

當按照隔柵系統編寫html後,就以為自適應這題目應該就解了。
但!其實沒有!都是因為chrome的方便而誤信啦!
怎麼說呢?
在移動chrome視窗大小的時候,網站內容會響應自適應的結果,
但是!一到行動端口,就發現根本是騙人的啊!

為什麼沒有呢?縮放chrome視窗感覺有啊?

但用chrome開發者工具檢查行動裝置端,才發現根本沒有呀。
只是整個縮小塞入屏幕而已。

好吧,只好去逛逛看哪位牛人的作品真正實現了這一步。
最快的方法就是直接找一期第一名作品陳慧娟學姊的作品看看!

該怎麼做呢?

非常非常簡單!
只要在主要的layout上加入一行代碼就可以達成!

app/views/layouts/admin.html.erbapp/views/layouts/application.html.erb

<head> 之下加入

⋯⋯略

<head>
  
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
  

如圖:

其中<meta http-equiv="X-UA-Compatible" content="IE=edge">,是給IE瀏覽器的(實際內容我不清楚XD)。

最重要的是<meta name="viewport" content="width=device-width, initial-scale=1">,是要求畫面不能被縮放。只要不能被縮放,就可以真正實現不同行動端口屏幕的自適應啦。

附上我找到的解釋資料

什麼是Viewport?
這裡所謂的Viewport它是網頁HTML的一種META標籤。
後面的initial-scale表示初始縮放,maximum-scale表示最大縮放比例,「1」意味著不能進行縮放。

於是就真正實現行動端口的自適應!成功畫面如下:


雖然可能來不及拉票了XD,
但如果對你有幫助的話同時尚有票數,願意支持一下的話,
就關愛一下我的作品吧!:hugging:
https://fullstack.xinshengdaxue.com/works/301

Comments

comments powered by Disqus