tedshd's DevNote

Develop & Design Note by Ted

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: '';
}

Something about favicon on website

Something about favicon on website

Favicon is a icon on browser tab.

But now we must do more thing on mobile device handle favicon.

2 way add browser favicon

  1. Put icon in url path <example.com>/favicon.png

  2. Add meta tag <link rel="icon" type="image/png" href="favicon.png" />

Notice: I like use png as my favicon, because i can reuse this file.

Icon format case

<!-- IE -->
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
<!-- other browsers -->
<link rel="icon" type="image/x-icon" href="favicon.ico" />

Refer - Correct MIME Type for favicon.ico?

Other icon for web case

For iOS device icon

<link rel="apple-touch-icon" href="<icon url>">
<link rel="apple-touch-icon" sizes="76x76" href="<icon url>">
<link rel="apple-touch-icon" sizes="120x120" href="<icon url>">
<link rel="apple-touch-icon" sizes="152x152" href="<icon url>">

For PWA add to home screen

Use manifest.json

The Web App Manifest | Web Fundamentals | Google Developers