手机上js怎么实现页面的缩放 - 腾讯云开发者社区 - 腾讯云

开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

一个emoji引发的思考

/blog/2014/12/unicode.html 所以emoji作为unicode，那在计算机上是怎么显示的？...之前我在一微信群里@我一朋友，结果出现了下面的情况。 ?...像泰文这种特殊合成字符的本质，你无法避免人们在计算机上都会有哪些奇妙的创造。...关于移动端多端适配方案的原理详细，可以参考手淘H5页面的终端适配链接地址: https://www.w3cplus.com/mobile/lib-flexible-for-html5-layout.html...来进行缩放的。

1.4K2 0

「实战」如何用H5实现原生体验的图片预览组件

| 导语手Q终端原生的图片预览器支持图片翻页和各种手势，这些用H5怎样实现？...类比手Q的AIO里的图片预览器，支持的手势和功能分别如下：手Q动漫这里之所以没有直接用手Q原生的图片预览器，而是新造一个轮子，主要原因是手Q动漫的图片预览器有一些定制的功能和ui展示，用web来实现更快捷可控一些...二、实现基础图片预览组件目前是基于alloyFinger.js来做手势支持，transform.js来做CSS3的变换，to.js来做动画的过渡函数。...关于transform.js组件 http://alloyteam.github.io/AlloyTouch/transformjs/ alloyFinger只提供了手势支持，但手势具体要实现的图片位置变换或者缩放的效果...那延长点要怎么计算呢，这里可以用向量的知识来指导坐标的计算方法。

2.9K2 0

您找到你想要的搜索结果了吗？

是的

没有找到

rem适配移动端的原理及应用场景

rem布局原理深度理解（以及em/vw/vh）一、前言我们h5项目终端适配采用的是淘宝那套《Flexible实现手淘H5页面的终端适配》方案。主要原理是rem布局。...那怎么办呢？对，css不是有相对单位rem么？我们全可以实现借助rem代替上面的a。...怎么让html元素字体大小恒等于屏幕的1/10呢？...rem是一种弹性布局，它强调等比缩放，100%还原。它和响应式布局不一样，响应式布局强调不同屏幕要有不同的显示，比如媒体查询。...五、rem布局方案从上可以看出最好的弹性布局方案就是rem+js的方案，《Flexible实现手淘H5页面的终端适配》就是采用rem+js实现的。flexible主要做了几点。

1.5K2 0

HTTP接口测试还可以这么玩

1 背景随着H5在各行业领域的运用，无论是在APP内嵌入H5页面的hybrid应用还是直接在微信公众号或者轻应用中使用H5页面都是非常的常见（比如前端页面通过HTTP 接口调用拉取数据进行交互，实现前后台分离...从Chrome的Network去分析一个网页的请求加载顺序大概就能看出，目前很多网页的请求顺序都是先去请求html，从html里得到css和js的地址，去请求css和js，从js里的http接口去请求相关的数据...1.1手工测试hold不住的问题 ?...手工提取） 2）拿到接口后，怎么获取接口参数所有的值（通过线上数据去挨个查找？从运营平台获取数据？）...3）具体实现流程图： ?

1.8K10 3

如何实现高性能的在线 PDF 预览

“这怎么这么慢？不行，用户肯定不能接受。。。” “公司网络不好... 你这文件太大了... 你重启一下试试？“ 不存在的，作为一个优秀的前端开发者，怎么可以说这种话，当然是想办法解决啦。...通过 getViewport 可以根据指定的缩放比例（scale）、旋转角度（rotation）获取当前 PDF 页面的实际大小。...实现细节下载 PDF 分片首先我们使用 PDF.js 提供的接口获取第一个分片的 url，然后再下载该分片的 PDF 文件。...渲染之前，我们需要知道 PDF 页面的大小。调用 PDF.js 提供的方法，我们能够根据当前 PDF 的缩放比例、选择角度来获取页面的实际大小。...针对上述问题，目前我们思考了两种方案：将大小不一样的页面进行缩放。当我们发现页面大小和保存的 pageSize 不一致时，可以将当前页进行缩放，这样就将所有页面的大小转化成了一样。

6.3K5 3

移动端布局多种实现方式

对比总结一下热门的解决方案通过媒体查询的方式即CSS3的 @media 天猫首页使用的 flex 弹性布局淘宝首页使用的 rem+viewport缩放（Flexible.js） hot.css --...-- ####@media媒体查询使用方法: @media screen and (max-width: 600px) { /当屏幕尺寸小于600px时，应用下面的CSS样式/ /你的css代码/...适配的开源库首先添加meta标签设置viewport 引入Flexible的阿里CDN 或者可以通过github进行npm安装下载引入和具体的入门教程可以看大漠大大的 “使用Flexible实现手淘...H5页面的终端适配 “教程进行学习进阶) ---- ####hotcss · Github 插件描述：hotcss不是一个库，也不是一个框架。

6226 0

移动端之在不同尺寸大小的手机上展示同一效果解决方案(修正二) by FungLeo

而且,设计师对我实现的页面还是颇多微词,因为,只有在普通安卓手机上显示是最正常的,5S有点拥挤,6p又有点过宽. 那么,到底TMD有没有一种方式,可以完美的实现设计稿的设计呢?...也就是说,要求就是,大手机上,看着每个元素,包括文字都要大一些.而在小手机上,看着要小一些.全部都整体缩放呢?...思路没错.怎么实现呢?首先,我想到的是媒体查询. 但是我很快放弃了....看过一些使用媒体查询的案例,首先,它不能无缝切换,而只能根据不同的手机尺寸来进行适配调整.而且,难保不会出现问题.虽然大部分的浏览器都是会进行缩放的.但是不排除某些页面嵌套到APP里面,没有进行缩放处理...决定用JS来实现.就需要来考量一下.

9461 0

我对移动端适配的了解

CSS像素在CSS、JS中使用的一个长度单位，单位px。注：在pc端1物理像素等于1px，但是移动端1物理像素不一定等于1px(高清屏)。...随着移动端的发展，在手机上看电脑端的页面已成为非常普及现象。而电脑端页面宽度较大，移动端宽度有限，要想看到整个网页，会有很长的滚动条，看起来非常麻烦。...所以苹果引入了理想视口，它对设备来说是最理想的布局视口，用户不需要对页面进行缩放就能完美的显示整个页面。最简单的做法就是使布局视口宽度设置为手机屏幕的宽度。移动端到底怎么适配不同的屏幕呢？...怎么解决呢？1px边框效果其实有很多hack方法，其中一种就是通过缩放viewport。...Flexible实现手淘H5页面的终端适配方案五：可以来看看我总结的：大漠老师最新的vw移动端适配方案

2K3 0

助力小白常见JS逆向乱杀喂饭教程——Url加密

答：如果你是一个合格的pythoner就觉得不难(只管调用，不管实现原理)。问4：加密有哪些? 答：对称加密和非对称加密(就像只有男人和女人一样)，后面会详细说的。问5：加密需要js底子吗?...然后我们点击一页进入瞧一瞧，看一看： ? 哎哎哎，怎么就成这个亚子了??? 经过反复查看之后，你肯定觉得：这就是加密(tnnd，遇到反爬了，俺也不会呀)！！！...这个时候怎么办呢，先回去看看主页面的标题列表。 ? 在url的父级元素以及和url这个a标签元素中并没有出现 js函数，下面来看解决办法： ?...然后把上面的特征码放在搜索栏中搜索下，看看结果： ? 相信到这里你已经可以手撕AES加密了(手动滑稽~) 问：怎么实现这样的加密？答：会js的套个js 的AES加密库。问：不会js怎么办？...答：上GitHub，上面的大佬早已经封装好了。请尽情调用吧~ Ps：实现了加密，爬人家一页两页的就行了哈，来学技能的不是让你搞人家站的。

1.4K3 0

移动web开发问题和优化小结

2.Meta标签页面在手机上显示时，增加这个meta可以让页面强制让文档的宽度与设备的宽度保持1:1，并且文档最大的宽度比例是1.0，且不允许用户通过点击或者缩放等操作对屏幕放大浏览。...（这个在ios10以上的版本已经失效了，即使加了下面的meta，用户双击，缩放还是可以缩放页面。...大家可以按照开发需求，参考下面的连接进行限制--ios10中禁止用户缩放页面） <meta content="width=device-width, initial-scale=1.0, maximum-scale...CSS3动画或者过渡尽量使用transform和opacity来<em>实现</em>动画，不要使用left和top。 2.动画和过渡能用css3解决的，就不要使用<em>js</em>。...关于touch和鼠标事件的延迟说明，我引用叶小钗大神博客里<em>面的</em>一张图片，如下 ? 在手<em>机上</em>，click的延迟将近400ms。对于用户而言，是一个很严重的延迟了！所以在手<em>机上</em>，并不建议用click。

2K2 1

H5活动宣传页通用布局技术解决方案

一般来说，活动宣传页都是全屏的滑动，而移动端的视窗大小确实是有点零碎化，于是将内容在不同的手机上良好展示出现就显得有点挑战了。本文旨在通过对一个个疑难点进行攻克而形成一种通用解决方案。...简单来说contain是缩放以使宽高全部容下，所以除非是图片比例与视窗比例正好合适，否则肯定出现空白；而cover是缩放到只要有宽高一个满足要求了，另一个就会将多余的进行裁剪，它跟contain正好相反...right: 0; transform: translate(0, -50%); } 对于我们案例中全是水平居中的logo，大会名称及大会时间三个元素，我们既可以在wrap使用flex布局实现水平居中...下面继续再抛出两个特例：元素使用了transform定位，怎么进行动画我们的animate.css动画库采用的就是transform的一些动画，如果我们元素本身的布局定位就采用了transform，...这里我们从rem入手，来个黑科技解决这个问题：通过js设置html的font-size为视窗高度的十分之一，于是1rem就成了视窗高度的10% document.addEventListener("DOMContentLoaded

1.3K1 0

H5活动宣传页通用布局技术解决方案

本文作者：IMWeb 结一原文出处：IMWeb社区未经同意，禁止转载一般来说，活动宣传页都是全屏的滑动，而移动端的视窗大小确实是有点零碎化，于是将内容在不同的手机上良好展示出现就显得有点挑战了...简单来说contain是缩放以使宽高全部容下，所以除非是图片比例与视窗比例正好合适，否则肯定出现空白；而cover是缩放到只要有宽高一个满足要求了，另一个就会将多余的进行裁剪，它跟contain正好相反...right: 0; transform: translate(0, -50%); } 对于我们案例中全是水平居中的logo，大会名称及大会时间三个元素，我们既可以在wrap使用flex布局实现水平居中...下面继续再抛出两个特例：元素使用了transform定位，怎么进行动画我们的animate.css动画库采用的就是transform的一些动画，如果我们元素本身的布局定位就采用了transform，...这里我们从rem入手，来个黑科技解决这个问题：通过js设置html的font-size为视窗高度的十分之一，于是1rem就成了视窗高度的10% document.addEventListener("DOMContentLoaded

1.6K5 0

H5活动宣传页通用布局技术解决方案

本文作者：IMWeb 结一原文出处：IMWeb社区未经同意，禁止转载一般来说，活动宣传页都是全屏的滑动，而移动端的视窗大小确实是有点零碎化，于是将内容在不同的手机上良好展示出现就显得有点挑战了...简单来说contain是缩放以使宽高全部容下，所以除非是图片比例与视窗比例正好合适，否则肯定出现空白；而cover是缩放到只要有宽高一个满足要求了，另一个就会将多余的进行裁剪，它跟contain正好相反...right: 0; transform: translate(0, -50%); } 对于我们案例中全是水平居中的logo，大会名称及大会时间三个元素，我们既可以在wrap使用flex布局实现水平居中...下面继续再抛出两个特例：元素使用了transform定位，怎么进行动画我们的animate.css动画库采用的就是transform的一些动画，如果我们元素本身的布局定位就采用了transform，...这里我们从rem入手，来个黑科技解决这个问题：通过js设置html的font-size为视窗高度的十分之一，于是1rem就成了视窗高度的10% document.addEventListener("DOMContentLoaded

1.4K4 2

初窥火狐浏览器插件后门

2、Background pages 后台执行的脚本，如果你的插件需要有一个脚本文件一直在后台执行的话，这个脚本不在任何用户的可见的页签里运行，而是在浏览器为它创建的一个空白页里运行，所以它不能访问别的网页的...它可以操作对应的页面的DOM，用它来注入js比较方便。个人认为，后门注入到可信的程序里就可以了，这也是一种比较理想的状态，而不用自己开发一个很好的软件，然后把后门加进去。...（我不懂密码学，对这些证书文件就不妄加论断了，只说怎么操作，hhhhh）然后修改配置文件，把此处 enable 项的值改为 true ?...这时我们看到，靶机上线了。 ? 看一下靶机页面源代码。 ? 执行个模块试试 ? 总结经过黑客的手的东西都很危险啊，还是小心使用的好。...本文只是展示了用借助 beef 来实现攻击，结合其他平台也是一样。自己编写后门代码更是优秀，火狐插件有很多 API，可以很方便的盗取信息，实现远程控制，奈何本人前端水平太差，只能在这抛砖引玉了。

1.3K0 0

前端调试入门

1.jpg 2.jpg 1.1脚本执行上图1中，点击tab3 进入“console”Tab页，即为脚本执行区域。在这里，可以输入任何可执行的js代码，回车即可执行并打印返回值。...2.打开Fiddler，点击右侧的AutoResponder的Tab页，勾选图6所示的几个选项。 3.在左侧网络列表中选择自己需要代理的请求，拖拽到右侧，进入下面的Rule Editor。...此时完成设置，手机上的http请求也可以用fiddler抓取了。...4.1 安卓微信/手Q/QQ浏览器/腾讯产品APP 这几种情况都有一个共性，就是app是腾讯的产品，而且在安卓手机上，我们知道安卓支持连接数据线结合Chrome内核的调试器进行inspector调试，...这种环境下我们需要借助fiddler结合手机进行代理文件，并在代理的js文件中按需打alert。

2.2K33 0

移动端开发总结

2.Meta标签页面在手机上显示时，增加这个meta可以让页面强制让文档的宽度与设备的宽度保持1:1，并且文档最大的宽度比例是1.0，且不允许用户通过点击或者缩放等操作对屏幕放大浏览。...（这个在ios10以上的版本已经失效了，即使加了下面的meta，用户双击，缩放还是可以缩放页面。...大家可以按照开发需求，参考下面的连接进行限制–ios10中禁止用户缩放页面） <meta content="width=device-width, initial-scale=1.0, maximum-scale...CSS3动画或者过渡尽量使用transform和opacity来<em>实现</em>动画，不要使用left和top。 2.动画和过渡能用css3解决的，就不要使用<em>js</em>。...关于touch和鼠标事件的延迟说明，我引用叶小钗大神博客里<em>面的</em>一张图片，如下 ? 在手<em>机上</em>，click的延迟将近400ms。对于用户而言，是一个很严重的延迟了！所以在手<em>机上</em>，并不建议用click。

2.6K1 0

Python爬虫一步步抓取房产信息

首先想到的嗯，你首先要跳出编程，从使用者甚至是产品经理的角度去思考：在浏览这个页面的时候，如何就能看到全市的二手房的情况。...通过主页的一个区一个区的输入，搜索，然后将页面的单元下载，嗯这是一个方法。 ? 南山区首页的情况如上图所示，只要更改keyword后面的参数，就可以获得不同区的二手房数据。...这样可以初步判断右边的链表是通过Js来加载，需要证实。 ? 关键词观澜湖的在源代码里面的搜索结果 ?...而在源代码页通过搜索roomList，却发现出现在script里面，证实roomList里面的内容是通过Js来加载的： ?...Header第一页 ? Herader第二页基本扒到这里，对整个页面就比较清晰了，也知道我们的爬虫要怎么去写了。开始写代码了逻辑整理出来后，整个代码就写的非常轻松了。

1.6K6 0

Android 上显示 PDF 文件

最近在手机上要显示 PDF 文件，在搜索引擎上找到了很多方案，大体上有以下几种：使用提供的在线服务，例如 Google 文档预览服务，mWebView.loadUrl(“http://docs.google.com...这个库是很强大的，配合 WebView ，可以支持预览，缩放，翻页等等功能使用腾讯浏览服务 https://x5.tencent.com/ 我是选择了 pdf.js 这个库，使用 WebView.../libraries/pdf.js https://unpkg.com/pdfjs-dist/ 刚开始使用时，直接使用提供的 API 创建 canvas ，每一页创建一个 canvas 然后排列下来，因为有其他的内容要显示...开发测试的时候因为文件小，并且是在电脑上浏览的没有发现什么问题，在手机上测试的时候使用了一个稍微大点的文件，内存立马就爆了。...在 pdf.js 的例子里看到了在手机上使用的例子，就改了改，它这个做到了循环使用 canvas，并且是逐页加载。修改之后在手机上使用 32M 的文件轻松无压力。示例，传送门 ?

2.3K3 0

七夕福利：程序员如何通过H5绘制手掌地图表白

用H5技术给自己的女友或心仪的人一个惊喜怎么样？手掌地图表白视频你值得拥有。先来看效果。...同理，我们还可以更改陆地的颜色或将“填充透明度”设为0%以增加与背景图手的融合。...[54e06783bdc948caa2cdd04d59c8b4d8~tplv-k3u1fbpfcp-zoom-1.image]点击左上角的保存图标，并返回到上一页，发布我们刚才编辑的样式。...--注意这里引用的是gl.js，才支持自定义样式--> <script charset="utf-8" src="https://map.qq.com/api/gljs?...[6fc40c16808049809efe3ec7e51aa4d2~tplv-k3u1fbpfcp-zoom-1.image] 先初始化地图（页面背景图为<em>手</em>的照片，中间层放的地图，顶层图是把手扣掉的png

8242 0

第120天：移动端-Bootstrap基本使用方法

第三方依赖 jQuery——Bootstrap框架中的所有JS组件都依赖于jQuery实现 html5shiv——让低版本浏览器可以识别HTML5的新标签，如header、footer、section...等 respond——让低版本浏览器可以支持CSS媒体查询功能条件注释：当满足if条件时，才执行里面的文件 3、视口视口的作用：在移动浏览器中，当页面宽度超出设备，浏览器内部虚拟的一个页面容器，将页面容器缩放到设备这么大，然后展示目前大多手机浏览器的视口（承载页面的容器）宽度都是980...；视口的宽度可以通过meta标签设置此属性为移动端页面视口的设置，当前值表示在移动端页面的宽度为设备的宽度，并且不缩放（缩放级别为1） width:视口的宽度 initial-scale:初始化缩放...（3）javascript插件内置组件模态对话框——下拉菜单——滚动监听——标签页——工具提示——弹出框——警告框——按钮——折叠面板——轮播图——吸顶效果

3.2K4 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭