記憶の藏書 　

3,291愛的鼓勵 60訂閱站台

先稍微解釋一下手機、瀏覽器的圖文縮放為何會破壞版面。因為縮放的並不是整體架構，只有圖片跟文字被縮放，至於框架版面還是原始大小，所以會造成畫面很不協調。 舉例說明會好理解些。你今天買一個2吋的蛋糕，外包裝盒的大小剛好容納整個蛋糕，然後你快樂的走回家時，剛好一位無所不能的神在逛街，看到你手上拿的的蛋糕，他覺得該給生日壽星一個驚喜，然後把你攔下說要慶祝你今天生日，所以決定把你的蛋糕變大一倍作為禮物。就在你充滿驚喜的期待下，裝蛋糕的盒子爆開了，蛋糕噴的不要不要的。怎麼回事？因為那個神只放大裡面的蛋糕，包裝盒沒跟著放大，要怎麼不爆呢？ 蛋糕就是圖片和文字，框架版面就是蛋糕盒，雖然我這個舉例超級瞎，但我相信你們一定明白原理了吧。所以若是覺得文字太小，請使用手機功能的手勢縮放，直接把手機畫面放大即可，手勢的放大是整體畫面放大，所以不會造成版面被破壞。 手機的縮放例如三星通常路徑為：設定--->協助工具-->改善可見度。應該就會有字體大小圖片大小等設定。 瀏覽器請點右上圖示會有下拉選單-->設定-- >無障礙設定。進入後就能看到圖文大小的調整。 以下截圖說明差異。 一、此圖為預設值100%的手機截圖。 圖一100%原始圖片查看 二、此圖為用手勢放大至左右對齊螢幕邊緣的畫面。 圖二100%原始圖片查看 三、此截圖為瀏覽器100%放大至120%，文字大小跟手勢縮放差不多大。 圖三100%原始圖片查看 從上面三張截圖來看，就可以明顯看到差異性，圖一跟圖三的文章框架相同，邊距也相同，但是文字的大小不同。圖一是正常未縮放圖文，而圖三就是瀏覽器無障礙設定內的圖文縮放120%，等於比圖一的文字大20%。你可以去想像一下圖三的框架不變，可是框架內的文字一直變大，30%、40%....框架內的空間越來越擠，放大50%那畫面根本不能看。 再來我們看圖二。圖二可以看到文字跟圖三的字一樣大，可圖二的框架也同樣放大了，所以每一行的字數跟原始是相同的，所以不會造成破壞框架進而造成視覺上的不舒服，所以瀏覽網頁覺得文字太小時，請用手勢來放大。例如圖二也只是把左右側的黑色邊距，用手勢稍微拉至跟畫面邊緣切齊，可是看起來文字就變大很多，也不會破壞整體排版。手機的螢幕就那麼大，所以要美觀真的要很仔細的編排版面，這也是寫這篇文章說明的原因。 最後附上測試縮放的原始網站： 點擊查看