整合營銷服務商
電腦端+手機端+微信端=數(shù)據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數(shù)據同步管理
免費咨詢熱線：
圖網在為一個項目提供h5微信上使用的小游戲開發(fā)的時候，設計到快速點擊按鈕來發(fā)電的游戲規(guī)則，所以用戶需要不斷的點擊按鈕來發(fā)更多的電量，這不斷的點擊會觸發(fā)雙擊的動作，瀏覽器就放大了。為了這個問題百度了很多資料，下面是主流的解決方案。
-----------------
現(xiàn)在的手機或平板電腦等移動設備上的瀏覽器默認都有雙擊放大的設置，怎么讓雙擊不放大？
在Mobile頁面上有提供viewport這個meta，可以用它來設置縮放。 但是在使用viewport之前要把頁面的文檔類型改成Mobile類型。 通常的頁面DTD都是XHTML或者簡單的HTML5聲明，移動設備要用下面這個聲明。
代碼如下:
<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd">
設置了DTD之后就可以使用viewport使頁面禁止縮放了。 通常把user-scalable設置為0來關閉用戶對頁面視圖縮放的行為。
代碼如下:
<meta name="viewport" content="user-scalable=0" />
但是為了更好的兼容，我們會使用完整的viewport設置。
代碼如下:
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" />
如果需要更詳細的關于viewport的資料可以參考MDN
https://developer.mozilla.org/en-US/docs/Mobile/Viewport_meta_tag
貌似DTD只聲明成HTML5就可以了，下面加上viewport的標簽
現(xiàn)在的手機或平板電腦等移動設備上的瀏覽器默認都有雙擊放大的設置，怎么讓雙擊不放大？
在Mobile頁面上有提供viewport這個meta，可以用它來設置縮放。 但是在使用viewport之前要把頁面的文檔類型改成Mobile類型。 通常的頁面DTD都是XHTML或者簡單的HTML5聲明，移動設備要用下面這個聲明。
代碼如下:
<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd">
設置了DTD之后就可以使用viewport使頁面禁止縮放了。 通常把user-scalable設置為0來關閉用戶對頁面視圖縮放的行為。
代碼如下:
<meta name="viewport" content="user-scalable=0" />
但是為了更好的兼容，我們會使用完整的viewport設置。
代碼如下:
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" />
如果需要更詳細的關于viewport的資料可以參考MDN
https://developer.mozilla.org/en-US/docs/Mobile/Viewport_meta_tag
貌似DTD只聲明成HTML5就可以了，下面加上viewport的標簽
----------------------------
但是這個沒有解決問題，因為我們采用的是viewport定寬的方式，而 viewport定寬會導致android下瀏覽器 禁止縮放的屬性失效，所以上面的方法對這個項目無效，最后通過一個css代碼解決問題，就是把按鈕盡量做大到占滿整個屏幕，因為我們發(fā)現(xiàn)，當元素很小的時 候，雙擊這個元素，會導致瀏覽器放大，但是當這個元素占據了整個屏幕的寬度的時候，雙擊這個元素，不會導致放大頁面，所以這個問題得以臨時解決。如果你有 更好的方法，可以與我們一起交流！
切圖網長期致力于h5、響應式等web前端開發(fā)技術研究，關注用戶體驗，如果你對此感興趣，就加我們公眾微信：qietuwang
TML5是一種用于構建現(xiàn)代網站和應用程序的最新版本的HTML標準。下面介紹HTML5的15個常用新特性和如何使用它們：
1.語義標簽：HTML5引入了一些新的語義標簽，如<header>、<nav>、<article>、<section>、<aside>和<footer>，用于更好地描述網頁內容的結構。
2.視頻和音頻：HTML5允許在網頁上嵌入視頻和音頻，通過使用<video>和<audio>標簽來實現(xiàn)。可以使用controls屬性添加播放器控制條。
3.畫布：HTML5的<canvas>標簽可以用于在網頁上繪制圖形、動畫和其他復雜的視覺效果。
4.SVG：HTML5支持可縮放矢量圖形（SVG），可以使用SVG標簽在網頁上繪制矢量圖形和動畫。
5.地理位置：HTML5允許網頁獲取用戶的地理位置信息，可以使用navigator.geolocation API實現(xiàn)。
6.Web存儲：HTML5引入了本地存儲機制，包括localStorage和sessionStorage，可以在瀏覽器端存儲數(shù)據。
7.Web Workers：HTML5允許通過Web Workers在后臺線程中執(zhí)行JavaScript代碼，以提高網頁性能和響應速度。
8.WebSocket：HTML5引入了WebSocket協(xié)議，可以實現(xiàn)瀏覽器和服務器之間的實時通信。
9.WebRTC：HTML5支持WebRTC技術，可實現(xiàn)瀏覽器之間的點對點音視頻通信。
10.微數(shù)據：HTML5的微數(shù)據機制可以讓網頁上的內容更容易被搜索引擎識別和解釋。
11.拖放：HTML5支持拖放操作，可以使用draggable屬性和ondrag事件實現(xiàn)。
12.表單控件：HTML5引入了一些新的表單控件，如日期選擇器、顏色選擇器、范圍選擇器等。
13.歷史API：HTML5的歷史API可以讓網頁在不刷新頁面的情況下改變URL，實現(xiàn)更好的用戶體驗。
14.全屏API：HTML5的全屏API可以讓網頁全屏顯示，提供更好的視覺效果和用戶體驗。
15.CSS3：雖然不是HTML5的一部分，但HTML5通常與CSS3一起使用。CSS3提供了更多的樣式和動畫效果，如過渡、變換、動畫等。
結語
牽手 持續(xù)為你分享各類知識和軟件 ，歡迎訪問、關注、討論 并留下你的小心心?
PDF文件現(xiàn)在在許多企業(yè)中常用 - 無論您是要生成銷售報告，交付合同還是發(fā)送發(fā)票，PDF都是首選的文件類型。PDF.js是由Mozilla編寫的JavaScript庫。由于它使用vanilla JavaScript實現(xiàn)PDF渲染，因此它具有跨瀏覽器兼容性，并且不需要安裝其他插件。在使用PDFJS之前你也可以先了解下原生的PDF<object>對象，本文僅介紹PDFJS。
https://mozilla.github.io/pdf.js/
官網提供了下載入口,有穩(wěn)定版和Beta版,我們要在生產環(huán)境下使用建議使用穩(wěn)定版,官網給我們提供了三種獲取PDF.js的方式
我們可以直接使用cdn服務，也可以將下載的文件引入，我們看一下示例代碼，這里我提供了兩種寫法，在項目運行之前，請確保你的同級目錄下有一個test.pdf文件
//index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="https://cdn.jsdelivr.net/npm/pdfjs-dist@2.0.943/build/pdf.min.js"></script>
<script src='./index.js'></script>
<title>PDF</title>
</head>
<body>
<canvas id="pdf"></canvas>
</body>
</html>
//index.js
// var loadingTask = pdfjsLib.getDocument("test.pdf");
// loadingTask.promise.then(
// function(pdf) {
// // 加載第一頁
// pdf.getPage(1).then(function(page) {
// var scale = 1;
// var viewport = page.getViewport(scale);
// //應用到頁面的canvas上.
// var canvas = document.getElementById("pdf");
// var context = canvas.getContext("2d");
// canvas.height = viewport.height;
// canvas.width = viewport.width;
// // 渲染canvas.
// var renderContext = {
// canvasContext: context,
// viewport: viewport
// };
// page.render(renderContext).then(function() {
// console.log("Page rendered!");
// });
// });
// },
// function(reason) {
// console.error(reason);
// }
// );
// index.js
(async () => {
const loadingTask = pdfjsLib.getDocument("test.pdf");
const pdf = await loadingTask.promise;
// 加載第一頁.
const page = await pdf.getPage(1);
const scale = 1;
const viewport = page.getViewport(scale);
// 應用到頁面的canvas上.
const canvas = document.getElementById("pdf");
const context = canvas.getContext("2d");
canvas.height = viewport.height;
canvas.width = viewport.width;
// 渲染canvas.
const renderContext = {
canvasContext: context,
viewport: viewport
};
await page.render(renderContext);
})();
當我們運行項目之后，打開瀏覽器查看，它已經將pdf的內容渲染到了瀏覽器中，且顯示了第一頁，如下圖所示：
如果就這樣的話遠遠是無法滿足我們使用的，因此我們來看一下它比較高級的用法，或者說簡單的用法，高級的功能。
首先我們將我們下載的js包加壓，復制里面的web文件夾，粘貼到你的項目目錄
然后修改你的index.html代碼，首先注釋掉之前引入的js代碼，然后修改body，如下
<body> <iframe src="test.pdf" style="border: none;" width="100%" height='1000px'></iframe> </body>
隨后打開我們的瀏覽器，你會發(fā)現(xiàn)一個預覽的窗口
它繼承了我們常用的功能，比如旋轉、下載、打印、自適應縮放、放大、縮小等，我們只需要使用iframe引入我們的pdf文件即可，其余的全部交給pdf來完成，即可獲得一個實現(xiàn)一個完整的pdf預覽功能。
PDFJS的這三層分開，讓我們很好的來根據業(yè)務需求來實現(xiàn)我們想要的部分，其簡單的api讓我們得心應手，總而言之，PDFJS是一個絕佳的PDF預覽解決方案。
PDFJS不僅僅支持pdf的二進制文件，同樣還支持base64編碼的pdf，如果在你的項目中需要用到pdf的預覽等功能，無疑它是一種良好的解決方案，當然想要實現(xiàn)相同的功能有許多辦法，我們可以選擇最適合我們需求的，官方還提供了一個完整的演示Demo，如下截圖，如果你覺得本文對你有幫助，請麻煩轉發(fā)、點贊加關注吧，后續(xù)會分享更多實用有趣的技術！
*請認真填寫需求信息，我們會在24小時內與您取得聯(lián)系。
