RWD - eddychang.me

iframe於響應式網頁設計(RWD)


Sample Image

嵌入Google地圖iframe碼

這次辦活動的頁面插入了Google Map所提供的嵌入碼,它是一個iframe的碼例如這是台灣總統府的Google地圖:

<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3614.8299385809332!2d121.50972681535653!3d25.039844744210242!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3442a90a870e5af1%3A0x180e1a442209d1c1!2zMTAw5Y-w5YyX5biC5Lit5q2j5Y2A6YeN5oW25Y2X6Lev5LiA5q61MTIy6Jmf57i957Wx5bqc!5e0!3m2!1szh-TW!2stw!4v1454501084561" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>

這個代碼插入到網頁後,用手機看會寬度跑掉。因為上次插入Youtube影片也有同樣的情況,找到的這次的解法也是類似,網路上就查得到如何解決這個問題。

這個解決方案大約是在2009年就有人提出了,算是一種利用CSS修正不同瀏覽器顯示與ifram嵌入的技巧,當時並還沒有響應式網頁設計的風潮。最初的提出解決的方式,是這篇文章:Creating Intrinsic Ratios for Video,"Intrinsic Ratios"中譯是"內在比例"的意思。