tedshd's DevNote

Develop & Design Note by Ted

Web Develop on mobile web & WebView

Web Develop on mobile web & WebView

因為某些原因必須把這些東西紀錄一下

其實實在太多東西要寫但實在是太忙且有點沒動力寫文章...

會分成兩個 mobile OS 與 mobile browser 加上 WebView 共 4 部分

  • Android

    • mobile web
    • WebView
  • iOS

    • mobile web
    • WebView

Android

需準備的東西

  • 電腦版的 chrome browser
  • Android 手機(需要有 Android Chrome browser)

在 2018 年的當下這裡不想再提非 chrome browser 的開發, 因為很難 debug

以下就簡單說明一下

1. 首先得把 Android 手機的開發者模式打開

設定 -> 關於手機 -> 軟體版本

找到軟體版本的選項就一直點, 直到點出提示您現在已成為開發人員, 這樣就可以了

進去開發人員選項USB 偵錯模式 打開

2. 連接手機到電腦
3. 允許金鑰授權

4. 打開電腦 chrome browser
5. 打開 開發人員工具(Mac: Command + Option + i, PC: F12)
6. 打開 remove device

7. 確認連接的裝置

8. 選擇 Inspect

Refer - Get Started with Remote Debugging Android Devices

9. 開始 debug
Notice

Webiew 的部分需要注意的就是必須是 Android WebView 的 debug 是打開的

Refer - Remote Debugging WebViews

iOS

需準備的東西

  • Mac 的 Safari browser
  • iPhone 手機

iPhone 目前只能針對 Safari debug, 其他 Browser 都沒辦法 debug

1. 把 iPhone Safari 的開發者模式打開

設定 -> Safari -> 進階

JavaScript On

網頁檢閱器 On

2. 把 Mac Safari 的開發模式打開

偏好設定 -> 進階 -> 在選單列中顯示「開發」選單

3. 連接手機到電腦
4. 選擇信任這台電腦
5. 打開電腦 Safari browser
6. 到選單列 -> 開發 確認 iPhone 已經顯示出來

7. 選擇要 debug 的網址

8. 開始 debug
Notice

iOS 的 debug 只有 beta 和 Xcode building 出來的 App 會出現, 線上版不會出現

在選單中不會分出該 url 是 WebView 或 browser 的 url, 且有時頁面關掉還會在選單中存在, 所以要仔細確認

最後

還有二個在 WebView 勉強可以稍微 debug 的方法

  1. 掛 proxy

可以看到手機上的的 Network 情況

  1. Xcode or Android studio log

上述兩種方法對 WebView 所能做的 debug 有限

PPT

HackMD

Web - viewport 是啥?你真的了解移動裝置的畫面大小處理嗎?來講古了

Web - viewport 是啥?你真的了解移動裝置的畫面大小處理嗎?來講古了

歷史

早期 viewport 是可以設定跟 device 的 dpi 一樣的(target-densitydpi=device-dpi), 但這時就有個問題就是當 viewport 的這個設定沒設定時, browser 上顯示的寬高就會不一樣了, 再者早期 mobile device 剛邁入 high resolution 的顯示就會顯得亂七八糟, Apple 是最早意識到這點, 所以它也是最早處理這個問題的, 就是直接在 OS 與 browser 上處理分辨率的問題, 不直接採用實際上螢幕 high resolution 的大小.

這也是為啥 Macbook pro 明明是 2K 螢幕但是 browser 的 px 只有 1280x720 左右, 那這又延伸另一個問題把分辨率變大就照成圖片等非向量顯示的圖片會失真, 所以就是為啥有 media query(device-pixel-ratio) or (min-resolution) 抑或 img srcset 等屬性的出現, 就是為了處理 high resolution 時圖片變糊的問題.

在 2018 年的現在 mobile device 的 browser 解析度都不會是真實 device 的解析度了, 已經在 OS 抑或 browser 處理掉了

解決方案

請讓 layout 儘量是彈性布局, RWD 不是讓你處理不同 device 的問題, 是讓你處理畫面大小與 high resolution 與螢幕方向的方式

網頁的 UI 不像一現實上的平面視覺大小是死的(很多剛進入業界的設計師都會遇到這問題, 甚至 F2E 也是如此)

client 端有很多的畫面大小, 所以必須讓你的 layout 設計是有彈性可以符合在不同畫面大小上的呈現, 如果 Layout 或 UI 太複雜, 那就得考慮 AWD 的設計

AWD(Adaptive Web Design) 是以 server side 辨別 UserAgent 來決定 client 需要呈現的元件

好處顯而易見的就是可以依照 UA(UserAgent) 決定要到 client 的 UI 元件再搭配 RWD 可以真正的做到靈活的彈性配置

Refer - 在移动浏览器中使用viewport元标签控制布局

Refer - Configuring the Viewport

AMP - amp analytics & conversion

AMP - amp analytics & conversion

Use google analytics must use amp-analytics component

It can use PHP print template function to view

First include

<script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>

ga click event

Refer - Adding Analytics to your AMP pages

function amp_ga_event_click_template($ga_id, $selector, $cate, $action, $label, $non_interaction = "0")
{

$template = <<<EOF
<amp-analytics type="googleanalytics">
<script type="application/json">
    {
        "vars": {
            "account": "%s"
        },
        "triggers": {
            "trackClickOnHeader" : {
                "on": "click",
                "selector": "%s",
                "request": "event",
                "vars": {
                    "eventCategory": "%s",
                    "eventAction": "%s",
                    "eventLabel": "%s"
                },
                "extraUrlParams": {
                    "ni": "%s"
                }
            }
        }
    }
</script>
</amp-analytics>
EOF;
    return printf($template, $ga_id, $selector, $cate, $action, $label, $non_interaction);
}

google adwords conversion

Refer - Using AMP for your AdWords Landing Pages

For landing page pageview

function amp_ga_conversion_pageview_template($conversion_id, $lang = "en", $conversion_label)
{

$template = <<<EOF
<amp-analytics type="googleadwords">
  <script type="application/json">
  {
    "triggers": {
      "onVisible": {
        "on": "visible",
        "request": "conversion"
      }
    },
    "vars": {
      "googleConversionId": "%s",
      "googleConversionLanguage": "%s",
      "googleConversionFormat": "3",
      "googleConversionLabel": "%s",
      "googleRemarketingOnly": "false"
    }
  }
  </script>
</amp-analytics>
EOF;
    return printf($template, $conversion_id, $lang, $conversion_label);
}

For click conversion

function amp_ga_conversion_click_template($ga_id, $selector, $conversion_id, $conversion_label, $non_interaction = "0")
{

$template = <<<EOF
<amp-analytics type="googleadwords">
  <script type="application/json">
  {
    "vars": {
        "account": "%s"
    },
    "triggers": {
        "trackClickOnHeader" : {
            "on": "click",
            "selector": "%s",
            "request": "conversion",
            "vars": {
                "googleConversionId": "%s",
                "googleConversionFormat": "3",
                "googleConversionLabel": "%s",
                "googleRemarketingOnly": "false"
            },
            "extraUrlParams": {
                "ni": "1"
            }
        }
    }
  }
  </script>
</amp-analytics>
EOF;

    return printf($template, $ga_id, $selector, $conversion_id, $conversion_label, $non_interaction);
}

webview - handle iOS status bar empty height in webview

webview - handle iOS status bar empty height in webview

in iOS

If you use fullscreen webview in app and set app size over iOS device navigation bar.

So need add height to fill status bar height.

iPhone6/7/8 is 20px

iPhoneX is 44px

You can use is sample code

header.ios {
    padding-top: 20px;
}
@media (width: 375px) and (height: 832px)  {
    header.ios {
        padding-top: 44px;
    }
}

iPhoneX fullscreen webview width is 375px, height is 832px

HTML - image load error handle

HTML - image load error handle

2 way

Use onerror

<img src="<image url>" onerror="this.src='<d4 image url>'" />

Use Magic Image Pseudo Element

img.imgd4 {
    position: relative;
    display: block;
}

img.imgd4:after {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    background: url(<d4 image url>) no-repeat;
    background-size: contain;
    width: 100%;
    height: 100%;
    content: '';
}