整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

阻止手机浏览器双击放大的方法

图网在为一个项目提供h5微信上使用的小游戏开发的时候,设计到快速点击按钮来发电的游戏规则,所以用户需要不断的点击按钮来发更多的电量,这不断的点击会触发双击的动作,浏览器就放大了。为了这个问题百度了很多资料,下面是主流的解决方案。

-----------------

现在的手机或平板电脑等移动设备上的浏览器默认都有双击放大的设置,怎么让双击不放大?

在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的标签

现在的手机或平板电脑等移动设备上的浏览器默认都有双击放大的设置,怎么让双击不放大?

在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代码解决问题,就是把按钮尽量做大到占满整个屏幕,因为我们发现,当元素很小的时 候,双击这个元素,会导致浏览器放大,但是当这个元素占据了整个屏幕的宽度的时候,双击这个元素,不会导致放大页面,所以这个问题得以临时解决。如果你有 更好的方法,可以与我们一起交流!

切图网长期致力于h5、响应式等web前端开发技术研究,关注用户体验,如果你对此感兴趣,就加我们公众微信:qietuwang

TML5是一种用于构建现代网站和应用程序的最新版本的HTML标准。下面介绍HTML5的15个常用新特性和如何使用它们:

1.语义标签:HTML5引入了一些新的语义标签,如<header><nav><article><section><aside><footer>,用于更好地描述网页内容的结构。

2.视频和音频:HTML5允许在网页上嵌入视频和音频,通过使用<video><audio>标签来实现。可以使用controls属性添加播放器控制条。

3.画布:HTML5的<canvas>标签可以用于在网页上绘制图形、动画和其他复杂的视觉效果。

4.SVG:HTML5支持可缩放矢量图形(SVG),可以使用SVG标签在网页上绘制矢量图形和动画。

5.地理位置:HTML5允许网页获取用户的地理位置信息,可以使用navigator.geolocation API实现。

6.Web存储:HTML5引入了本地存储机制,包括localStorage和sessionStorage,可以在浏览器端存储数据。

7.Web Workers:HTML5允许通过Web Workers在后台线程中执行JavaScript代码,以提高网页性能和响应速度。

8.WebSocket:HTML5引入了WebSocket协议,可以实现浏览器和服务器之间的实时通信。

9.WebRTC:HTML5支持WebRTC技术,可实现浏览器之间的点对点音视频通信。

10.微数据:HTML5的微数据机制可以让网页上的内容更容易被搜索引擎识别和解释。

11.拖放:HTML5支持拖放操作,可以使用draggable属性和ondrag事件实现。

12.表单控件:HTML5引入了一些新的表单控件,如日期选择器、颜色选择器、范围选择器等。

13.历史API:HTML5的历史API可以让网页在不刷新页面的情况下改变URL,实现更好的用户体验。

14.全屏API:HTML5的全屏API可以让网页全屏显示,提供更好的视觉效果和用户体验。

15.CSS3:虽然不是HTML5的一部分,但HTML5通常与CSS3一起使用。CSS3提供了更多的样式和动画效果,如过渡、变换、动画等。

结语

牵手 持续为你分享各类知识和软件 ,欢迎访问、关注、讨论 并留下你的小心心❤

PDF文件现在在许多企业中常用 - 无论您是要生成销售报告,交付合同还是发送发票,PDF都是首选的文件类型。PDF.js是由Mozilla编写的JavaScript库。由于它使用vanilla JavaScript实现PDF渲染,因此它具有跨浏览器兼容性,并且不需要安装其他插件。在使用PDFJS之前你也可以先了解下原生的PDF<object>对象,本文仅介绍PDFJS。

官网地址

https://mozilla.github.io/pdf.js/

下载和安装

官网提供了下载入口,有稳定版和Beta版,我们要在生产环境下使用建议使用稳定版,官网给我们提供了三种获取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的内容渲染到了浏览器中,且显示了第一页,如下图所示:

如果就这样的话远远是无法满足我们使用的,因此我们来看一下它比较高级的用法,或者说简单的用法,高级的功能。

使用iframe

首先我们将我们下载的js包加压,复制里面的web文件夹,粘贴到你的项目目录

然后修改你的index.html代码,首先注释掉之前引入的js代码,然后修改body,如下

<body>
 <iframe src="test.pdf" style="border: none;" width="100%" height='1000px'></iframe>
</body>

随后打开我们的浏览器,你会发现一个预览的窗口

它继承了我们常用的功能,比如旋转、下载、打印、自适应缩放、放大、缩小等,我们只需要使用iframe引入我们的pdf文件即可,其余的全部交给pdf来完成,即可获得一个实现一个完整的pdf预览功能。

PDF.js三个不同层

  • 核心 - PDF的二进制格式在此层中进行解释。直接使用该层被认为是高级用法。
  • 显示 - 该层构建在核心层之上,为大多数日常工作提供易于使用的界面。
  • Viewer - 除了提供编程API之外,PDF.js还附带一个现成的用户界面,其中包括对搜索,旋转,缩略图侧边栏和许多其他内容的支持。

PDFJS的这三层分开,让我们很好的来根据业务需求来实现我们想要的部分,其简单的api让我们得心应手,总而言之,PDFJS是一个绝佳的PDF预览解决方案。

总结

PDFJS不仅仅支持pdf的二进制文件,同样还支持base64编码的pdf,如果在你的项目中需要用到pdf的预览等功能,无疑它是一种良好的解决方案,当然想要实现相同的功能有许多办法,我们可以选择最适合我们需求的,官方还提供了一个完整的演示Demo,如下截图,如果你觉得本文对你有帮助,请麻烦转发、点赞加关注吧,后续会分享更多实用有趣的技术!