小雕雕的家

最近在做一個網頁，因為裡面包含了行動版的網頁，所以就要讓 Android、IOS 都可以正常使用

開發完之後我只能說.....IOS 的瀏覽器 (iPhone Safari、Chrome) 已經不是普通的爛

不管是操作面還是實際開發上，都讓我快要吐血.....這篇不談操作面，只講開發

因為遇到了很多靈異事件，在電腦版跟 Android 上都好好的，在 IOS 上就不行

不然就是只有 IOS 不支援，所以當你遇到靈異事件，第一件事可以先到 can i use 來查是否有支援

https://caniuse.com/

以下就列出我在這個專案所遇到有關行動裝置的問題與一些解決方式

前言：

之前曾經在下面這篇有提到 CSS display 的一些用法，但那時候忽略了 Flex 

Responsive Web Design (RWD) 響應式網站開發教學與心得

因為覺得有點麻煩，而且有些舊瀏覽器不太支援

但是最近才知道原來他好用的跟什麼一樣，所以這篇就來記錄學習的心得與練習一些範例

而且因為RWD的興起讓 Flexbox 排版方式好像已經慢慢變成趨勢了，因為他在排版使用上彈性比較大

所以應該是要好好了解一下才對~

這篇文章還是有點長，所以分一段落

0、前言

一、清除前幾行內容中的禁止轉譯 JavaScript 和 CSS

二、使用瀏覽器快取功能

三、啟用壓縮功能

四、壓縮 JavaScript

五、壓縮 CSS

最近在做行動版網頁的時候遇到一些小問題

深深覺得 IOS 的 Safari 有點像電腦版 IE 那般難搞......

首先一開始在用 display: flex 做垂直置中的時候就遇到了問題

.vertical-align {

display: flex;

align-items: center;

}

想跳過廢話前言的可以直接點下面的連結到相關主題

0. 前言

1. RWD 介紹

2. 使用純 CSS 開發 RWD 網頁

2.1. Media Queries 與撰寫習慣

2.2. Fluid Grid

2.3. Fluid / Flexible Image