2. 程式人生 > >Canvas適配手機端

Canvas適配手機端

阿新 • • 發佈：2019-01-15

Canvas適配困境

最近做了個H5小遊戲，它的主頁的html程式碼如下：

<<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
 

    <meta name="HandheldFriendly" content="true">
    <title>React game</title>
</head>
<body>
    <div id="container">
        <div id="root"></div>
        <canvas id="canvas" width=600 height=900>Canvas not supported</canvas>
    </div>

    <script
 
 src="common.js" defer async></script>
    <script src="index.bundle.js" defer async></script> 
</body>
</html>

這裡我設定了meta標籤， 告訴瀏覽器使用裝置的寬度作為檢視寬度(width=device-width)並禁止縮放(user-scalable=no)，
螢幕按1:1的尺寸顯示，在iPhone和其他智慧手機提供全檢視的瀏覽器，禁止使用者縮放頁面。

Canvas兩套尺寸

CSS設定canvas元素大小 與直接設定屬性相比，其差別是基於這樣一個事實：
canvas元素實際有兩套尺寸。
一個是元素本身大小，


一個是元素繪圖表面drawing surface的大小！
設定元素的width 和height 實際是同時設定 元素本身大小和 元素繪圖表面的大小
而CSS設定，只是元素大小，繪圖表面不影響，依然是預設的 300X150px
有趣的事情發生了，但當canvas元素大小不符合繪圖表面的大小時就會對 繪圖表面進行縮放使得它符合元素的大小！

警告： 瀏覽器自動縮放Canvas
通過width與height屬性 而非CSS修改canvas元素的大小，。
使用CSS會導致瀏覽器縮放繪圖表面大小！

這是當你沒有設定width和height的時候。
預設是300X150
這裡寫圖片描述

此時如果你用CSS設定width和height：
這裡寫圖片描述

所以只是拉伸了繪圖表面，本身的繪圖表面仍然是300X150

解決方法

針對這個問題，我決定在head標籤中再新增一個js檔案用來
適配響應式。
首先要判斷是在PC瀏覽器還是移動端開啟的。

我們要在程式碼中檢測視口大小，對於PC瀏覽器而言
視口和瀏覽器視窗的大小是基本一致的。
當然這是在margin和padding為0時，html和body
元素的大小和瀏覽器是一致的。

移動端視口

移動端中分視覺視口和理想視口。
視覺視口： 使用者正在看到的網站的區域，我們可以通過縮放去操作視覺視口但是不會影響佈局視口

理想視口，對裝置來講，是最理想的視口尺寸。
顯示在理想視口中的網站擁有最理想的寬度，不需要縮放。
但只有當網站是手機（或者平板）的時候，才應該使用理想視口。

使用navigator的 UA檢測方法

var ua=navigator.userAgent;
var system={
    win:false,
    mac:false,
    x11:false,
    //mobile
    iphone:false,
    ipad:false,
    ios:false,
    android:false,
    winMobile:false
};

//
var p=navigator.platform;
system.win=p.indexOf('Win')==0;
system.mac=p.indexOf('Mac')==0;
system.x11=(p=='x11')||(p.indexOf('Linux')==0);

system.iphone=ua.indexOf('iPhone')>-1;
system.ipad=ua.indexOf('iPad')>-1;
system.android=ua.indexOf('Android')>-1;

如果是PC瀏覽器我們設定canvas的
width 600px
height 900px那麼就按這個顯示。

但是如果檢測到是移動端那麼就把viewport的寬和高賦給canvas的 width 和 height。
程式碼如下：

/**
 *
 * 識別移動裝置
 * 檢測相應的裝置。
 * */

var canvas=document.getElementById('canvas');

var ua=navigator.userAgent;
var system={
    win:false,
    mac:false,
    x11:false,
    //mobile
    iphone:false,
    ipad:false,
    ios:false,
    android:false,
    winMobile:false
};

//
var p=navigator.platform;
system.win=p.indexOf('Win')==0;
system.mac=p.indexOf('Mac')==0;
system.x11=(p=='x11')||(p.indexOf('Linux')==0);

system.iphone=ua.indexOf('iPhone')>-1;
system.ipad=ua.indexOf('iPad')>-1;
system.android=ua.indexOf('Android')>-1;

function getViewPort(){
    var viewHeight=window.innerHeight||document.documentElement.clientHeight;
    var viewWidth=window.innerWidth||document.documentElement.clientWidth;
    console.log(viewHeight,viewWidth);
    if(system.iphone){
        //alert(viewWidth,viewHeight);
        document.body.style.width=viewWidth;
        canvas.width=viewWidth;
        canvas.height=viewHeight;
    }
    else if(system.win){
        canvas.width=600;
        canvas.height=900;
    }
}

getViewPort();

顯然我們可以根據這個viewport的大小來設定width和height。
canvas顯然是可以響應式的根據不同裝置的視口大小來設定canvas的寬高。
而且用JS設定這個寬高，也不會像用CSS那樣造成檢視拉伸的不良效果。

相關推薦

Canvas適配手機端

Canvas適配困境 最近做了個H5小遊戲，它的主頁的html程式碼如下： <<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8

適配手機端的幾種寫法

1，rem佈局，現在普遍常用的方法 一般ui設計師給的頁面都是640的，所以document.documentElement.clientWidth/6.4+"px";專案中，在ps中量的尺寸直接除以

html 適配手機端,使用media方式(個人記錄)

  適配手機: @media only screen and (min-device-width: 320px) and (max-device-width:360px) and (-webkit-min-device-pixel-ratio: 2) {.ui-markett

web適配手機端開發總結

現在手機端也業務要多於pc端，如何做手機端的web頁面也成了許多web前端工程師的必修課，以下是我總結的一些心得，大家茶餘飯後研讀一下，看看能不能漲漲姿勢。適配手機端我主要總結3點：1. 在頁面頂部加meta，它的大概意思就是讓頁面1:1顯示，使用者禁止縮放。<meta

HTML5手機端開發－適配手機端瀏覽器1

1、如何網頁的寬度自適應螢幕？      在head標籤裡新增以下程式碼: <meta name="viewport" content="width=device-width"/> 2、在

HTML頁面適配手機移動端視窗寬度

         隨著網路的快熟發展，越來越多的人使用手機上網。移動裝置正超過桌面裝置，成為訪問網際網路的最常見終端。於是，網頁設計師不得不面對一個難題：如何才能在不同大小的裝置上呈現同樣的網頁？手機的

51CTO博客發布H5移動版（適配手機）2017.5.17

51cto博客 移動站 各位，51CTO博客於5月17日發布H5移動版，可以適配手機和平板，分享文章到手機，閱讀體驗更佳，掃碼可以進入（進入後，可以收藏到瀏覽器或展示在手機桌面，以後可以打開進入博客）： 後續我們還會繼續優化移動站的首頁，也歡迎廣大博友的建議和意見。51CTO博客發布H5移

js動態適配移動端font-size,單位：rem

獲取 移動端 20px ner 比例 得到 str col 一個 比如：目前我手中有一張psd圖，大小為640*1010，適配蘋果5的手機。 方法步驟： 1.我采用font-size=10px為640*1010手機的初始像素大小； 1rem=10px； 此時psd上

適配移動端大全

class edi orien 設備 scree -h hone gpo port /* 兼容iphone5 */ @media (device-height:568px) and (-webkit-min-device-pixel-ratio:2){} @media on

7個步驟讓PC網站自動適配手機網頁

on() 開發 應用 網頁 con 像素 取消 ica 引入 傳統的網站如何完成向移動設備的快速轉型？ 通過移動適配技術可以實現，切圖網是國內首家基於web技術服務的公司，而移動適配主要通過底層的web技術開發手段來完成，下面切圖網將從技術角度來告訴你通過7個步驟來完成一個

基於Taro + Dva構建的適配不同端（微信小程式、H5、React-Native 等）的時裝衣櫥

前言 Taro 是一套遵循 React 語法規範的 多端開發 解決方案。現如今市面上端的形態多種多樣，Web、React-Native、微信小程式等各種端大行其道，當業務要求同時在不同的端都要求有所表現的時候，針對不同的端去編寫多套程式碼的成本顯然非常高，這時候只編寫一套程式碼就能夠適配到多端的能力就顯得極

rem適配移動端—動態改變html的px值

//頁面初始化時執行fnResize()//視窗大小變化時執行 window.onresize = function () { fnResize() } function fnResize() { var deviceWidth = document.documentElem

Vue:將px轉化為rem，適配移動端vant-UI等框架（px2rem-loader）

轉載：https://www.cnblogs.com/WQLong/p/7798822.html 1.下載lib-flexible 使用的是vue-cli+webpack，通過npm來安裝的 npm i lib-flexible --save 2.引入lib-flexible 在main.

css3 媒介查詢 適配移動端

這種適配方案，適合於640 的設計稿，剛好1rem = 100px，使用起來比較簡單，真實px尺寸前進兩位小數點就是對應的rem 值，使用方便； @media screen and (min-width: 320px) { html { font-size: 50px; }

在使用rem適配移動端時，如何改變根元素的字型大小？

rem和em相對單位長度我們經常用在響應式開發中，rem 和 em 單位是由瀏覽器基於你的設計中的字型大小計算得到的畫素值。em 單位基於使用他們的元素的字型大小。rem 單位基於 html 元素的字型大小。em 單位可能受任何繼承的父元素字型大小影響。rem 單位可以從瀏覽

關於rem適配移動端

(function(doc, win) {     var docEl = doc.documentElement,         resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'res

html5適配手機螢幕

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=2.0, user-scalable=yes"

Vue:將px轉化為rem，適配移動端

1.下載lib-flexible我使用的是vue-cli+webpack，所以是通過npm來安裝的npm i lib-flexible --save2.引入lib-flexible在main.js中引入lib-flexibleimport 'lib-flexible/flex

Vue-cli 將px轉化為rem，適配移動端（vue-cli2.x 和 vue-cli3中的使用）

一. Vue-cli2.x中的用法 1.下載lib-flexible 我使用的是vue-cli+webpack，所以是通過npm來安裝的 npm i lib-flexible --save 2.引入lib-flexible 在main.js中引入lib-flexib

px2rem-loader（Vue:將px轉化為rem，適配移動端）

轉載：https://www.cnblogs.com/WQLong/p/7798822.html 1.下載lib-flexible 使用的是vue-cli+webpack，通過npm來安裝的 npm i lib-flexible --save 2.引入lib-flexible 在