文档建议反馈控制台
首页
学习
活动
专区
工具
TVP
最新优惠活动
文章/答案/技术大牛
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

触摸事件 touchstart、touchmove、touchend

2、移动端浏览器触摸事件： 事件名称 描述 是否包含 touches 数组 touchstart 触摸开始，多点触控，后面的手指同样会触发 是 touchmove 接触点改变，滑动时 是 touchend...4、每个 Touch 对象包含的属性如下： clientX：触摸目标在视口中的x坐标。 clientY：触摸目标在视口中的y坐标。 identifier：标识触摸的唯一ID。... 1、如果在 PC 上访问，可以使用 Chrome 浏览器的移动响应式设备进行模拟，或者直接在移动设备(如手机)上访问 2、Chrome 浏览器，F12...3、上面是使用 JQuery 的写法，推荐使用如下所示的 JavaScript 方式，因为在获取回调函数的 事件对象时，JQuery 方式会有问题，JavaScript 则是没有问题的。 JQuery 获取触摸对象的class属性值 } /** * 手指在触摸屏上移动时——函数调用

1.7K20

Bootstrap笔记

视口的作用：在移动浏览器中，当页面宽度超出设备，浏览器内部虚拟的一个页面容器...，将页面容器缩放到设备这么大，然后展示目前大多数手机浏览器的视口（承载页面的容器）宽度都是980；视口的宽度可以通过meta标签设置此属性为移动端页面视口设置，当前值表示在移动端页面的宽度为设备的宽度，...视口 视口的作用：在移动浏览器中，当页面宽度超出设备，浏览器内部虚拟的一个页面容器...，将页面容器缩放到设备这么大，然后展示 目前大多数手机浏览器的视口（承载页面的容器）宽度都是980； 视口的宽度可以通过meta标签设置 此属性为移动端页面视口设置，当前值表示在移动端页面的宽度为设备的宽度...最小缩放initial-scale 第三方依赖 jQuery Bootstrap框架中的所有JS组件都依赖于jQuery实现 html5shiv 让低版本浏览器可以识别HTML5的新标签

3.4K90
    • 您找到你想要的搜索结果了吗？
    是的
    没有找到

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

    第三方依赖 jQuery——Bootstrap框架中的所有JS组件都依赖于jQuery实现 html5shiv——让低版本浏览器可以识别HTML5的新标签，如header、footer、section...[endif]--> 3、视口 视口的作用：在移动浏览器中，当页面宽度超出设备，浏览器内部虚拟的一个页面容器，将页面容器缩放到设备这么大，然后展示 目前大多手机浏览器的视口（承载页面的容器）宽度都是980...； 视口的宽度可以通过meta标签设置 此属性为移动端页面视口的设置，当前值表示在移动端页面的宽度为设备的宽度，并且不缩放（缩放级别为1） width:视口的宽度 initial-scale:初始化缩放...--html5shiv让浏览器可以识别HTML5的新标签--> 10 浏览器可以使用CSS3的媒体查询--> 11 的所有组件都是依赖jquery的--> 22 jquery/jquery.js"> 23 <script src

    3.2K40

    异步加载脚本保持执行顺序

    首先是外部脚本和行内脚本，对于异步加载的脚本，会导致竞争状态，使得出现未定义的错。...以下几种方式解决该问题： 1.硬编码回调 将test方法的执行定义在外部脚本（即调用的脚本），该方法不灵活，如果调用的是第三方脚本的话，更加麻烦。此处不显示例子。...4.Script onload： 前面提到的整合技术会增加页面的脆弱性、延迟和开销，通过监听脚本的onload事件可以解决这些问题。 运行结果： ? ?...$("#test").addClass('class_name'); } 由于浏览器并不支持这种模式，所以需要在脚本的内部增加代码来执行行内脚本，找到该脚本，并用eval...由于脚本没有按顺序执行，出现未定义的错误。 解决方法1：Managed XHR 通过EFWS.Script模块封装了一种技术，将XHR响应加入队列来保证它们按顺序执行。

    1.8K20

    前端常见面试题--初级版

    2.如何在 React 中实现组件之间的通信？3.Angular 的依赖注入是如何工作的？4.你如何使用 jQuery 选择和操作 DOM？...# 四：性能优化### 问题:1.解释一下前端性能优化的常用策略。2.如何减少页面加载时间？3.什么是代码拆分（Code Splitting）？它如何帮助优化性能？4.如何避免浏览器重绘和回流？...# 五：响应式和移动端开发### 问题:1.什么是媒体查询（Media Queries）？如何使用它们？2.如何优化移动端页面的性能？...**优化移动端性能：**减少加载时间、使用触摸友好的UI、优化输入延迟、避免不必要的加载和重绘等。**视口和视口单位：**视口是用户在屏幕上看到的区域。...视口单位（如vw、vh、vmin、vmax）是相对于视口尺寸的单位，可以方便地实现响应式布局。# 六：版本控制### 问题:1.你如何使用 Git？2.描述一下 Git 的工作流程。

    9410

    月入35k大佬总结：web前端必须学习的内容（附全套前端教程）

    在“设计”视图中看效果，在“代码”视图中学本质， 将各种视图的优势发挥到极致，这种对照学习的方法弥补了单纯识记HTML标签和属性的枯燥乏味，想必对各位初学的小盆友们来说必定是极好的!...接下来我们进入第四个阶段——jQUery的学习 jQuery 是一个免费、开源的轻量级的JavaScript库，并且兼容各种浏览器(jQuery2.0及后续版本放弃了对IE6/7/8浏览器的支持)，同时现在有很多基于...传统布局的局限性、Flex布局优势、盒子父级常见属性设置、盒子子级常见属性设置、携程网 Flex 移动端页面开发 移动端开发：移动端屏幕介绍、移动端浏览器介绍、移动端操作系统介绍、真机调试、viewport...视口、rem 单位使用、移动端主流适配解决方案、常见移动端样式兼容方案、预处理器 less、媒体查询 本阶段学习关键词： HTML5 标签、CSS3 动画、移动端适配、真机调试、rem、flex 布局...、媒体查询、Bootstrap、Viewport、移动端调试 本阶段需要掌握的能力如下： 掌握 HTML5 新布局标签、多媒体标签； 掌握 CSS3 2D、3D 变换、动画效果； 了解移动端屏幕、移动端浏览器

    2.4K40

    【学习笔记】JavaScript

    梗概 简单，应用量大，但支持不了高并发 原生JS开发，按照ECMAScript标准（ES），浏览器支持的版本与现实开发的版本不一致，可能需要webpack进行支持 微软的TypeScript是js的超集...是自己定义的很小的数） null和undefined null 空 undefined 未定义 数组 // 可以是不同类型的（Java要相同） // 为了可读性，尽量用[] let arr = [1,2,3...for(let i in age) { } for(let x of age) // x为具体的值(未定义的值?)...let 就避免的这个问题. 常量 const 约定俗成, 在ES6之前, 全部用大写, 建议不改...., 所以删除节点的时候, 注意, child在变化 插入节点 创建标签, 设置标内容, 设置标签内内容, 标签插入 追加 // list和id1都是实现获取的节点, 若id1原本在, 貌似是会移动过去

    4.8K20

    移动端基础

    移动端浏览器我们主要针对webkit内核进行兼容 　　现在移动端碎片化比较严重，分辨率和屏幕尺寸大小不一 1.移动端调试方法 Charome DevTools(谷歌浏览器) 的模拟手机调试...视口可分为布局视口、视觉视口和理想视口 2.1布局视口 layout viewport 一般移动设备的浏览器都默认设置了一个布局视口，用于解决早期的PC端页面在手机上显示的问题 iOS，Android...可以通过缩放去操作视觉视口，但不会影响布局视口，布局视口仍保持原来的宽度 2.3理想视口 ideal viewport 为了使网站在移动端有最理想的浏览和阅读宽度而设定 需手动添写meta视口标签通知浏览器操作...，需花费很大精力去调兼容性问题 媒体查询 bootstarp 5.移动端技术解决方案 1.移动端浏览器 移动端浏览器基本以webkit内核为主，所以就考虑webkit兼容性问题。...2.css初始化 normalize.css 移动端CSS初始化推荐使用normalize.css 保护了有价值的默认值 修复了浏览器bug 是模块化的 拥有详细文档 官网地址:

    1.4K31

    移动端基础

    移动端基础 移动端浏览器我们主要针对webkit内核进行兼容 现在移动端碎片化比较严重，分辨率和屏幕尺寸大小不一 1.移动端调试方法 Charome DevTools(谷歌浏览器) 的模拟手机调试...视口可分为布局视口、视觉视口和理想视口 2.1布局视口 layout viewport 一般移动设备的浏览器都默认设置了一个布局视口，用于解决早期的PC端页面在手机上显示的问题 iOS，Android...可以通过缩放去操作视觉视口，但不会影响布局视口，布局视口仍保持原来的宽度 2.3理想视口 ideal viewport 为了使网站在移动端有最理想的浏览和阅读宽度而设定 需手动添写meta视口标签通知浏览器操作...，需花费很大精力去调兼容性问题 媒体查询 bootstarp 5.移动端技术解决方案 1.移动端浏览器 移动端浏览器基本以webkit内核为主，所以就考虑webkit兼容性问题。...2.css初始化 normalize.css 移动端CSS初始化推荐使用normalize.css 保护了有价值的默认值 修复了浏览器bug 是模块化的 拥有详细文档 官网地址:

    1.7K10

    学姐叫我看 CSS 新出的容器查询，然后把公共组件重构成响应式的！

    在前端开发中经常需要按不同屏幕尺寸来进设计达到PC和移动端响应式。我们一般使用CSS媒体查询来检测视口宽度或高度，然后根据该模式改变设计。 这就是在过去10年中设计Web布局的方式。...在本文中，我将介绍它是什么，它将如何改变作为设计师的工作流，等等。 当前响应设计状态 当前，我们实现响应式，一般需要 UI 设计三个样式，分别是移动，平板电脑和桌面等。...现在你可能会想，这里有什么问题？ 喔或，这是一个很好的问题。 问题是，只有当视口宽度大于特定值时，开发人员才会使用组件的变体。...第二种情况下(Case 2)也是一样的问题 如果使用容器查询，我们可以通过查询父组件来决定如何显示特定组件来解决这些问题。考虑下图，它展示了我们如何使用容器查询来修复这个问题。...当我们在设计UI时以这种心态思考时，我们可以开始考虑组件的不同变体，这些组件依赖于它们的父宽度。 在下面的图中，请注意文章组件的每个变化是如何以特定的宽度开始的。

    2.2K30

    移动开发-流式布局

    Normalize.css：保护了有价值的默认值、修复了浏览器的bug、是模块化的 、拥有详细的文档 Normalize.css官网地址： http://necolas.github.io/normalize.css...0) 布局视口 layout viewport: 视口是浏览器显示页面内容的屏幕区域, 视口可以分为布局视口、视觉视口和理想视口 视觉视口 visual viewport: 它是用户正在看到的网站的区域...，可通过缩放去操作视觉视口 理想视口 ideal viewport: 理想视口，对设备来讲，是最理想的视口尺寸，需要手动添写meta视口标签通知浏览器操作 meta视口标签目的：布局视口的宽度应该与理想视口的宽度一致...，就是设备有多宽，布局视口就多宽 二倍图: 一个px能显示的物理像素点的个数，称为物理像素比或屏幕像素比，1CSS像素=1物理像素 多倍图: 在标准viewport设置中，使用倍图来提高图片质量，解决在高清设备中的模糊问题...，以适应不同终端, 制作麻烦，需要花很大精力去调兼容性问题 移动端浏览器: 移动端浏览器基本以**webkit 内核**为主，因此我们就考虑webkit兼容性问题 同时我们浏览器的私有前缀我们只需要考虑添加

    1.1K30

    BootStrap的一个标准框架的内容解释——来源于bootstrap官网

    --初始化移动浏览显示——平时使用的移动设备是把页面放进一个虚拟的视图：viewport中，一般情况先，这个视口比屏幕宽，这样就不用把每个网页挤到很小的设备屏幕大小中，但是用户浏览需要缩放or左右平移页面才能看清楚...viewport可以让开发者控制在移动设备上显示时页面的大小或缩放，这里的宽度是控制viewport/视口的大小，可以指定一个值，width=device-width就是让视口宽度等于设备的宽度的意思，...总结，这句话的意思就是让视口的宽度等于物理设备上真是的分辨率，初始的缩放比例为1=不缩放。主要为了适配移动设备用的，都要加上。...IE6、7、8版本（IE9以下版本）浏览器兼容html5新增的标签，引入代码文件即可。...也是为了使IE6、7、8版本浏览器兼容css3样式--> <!

    1.1K50

    HTML5 - 虚拟键盘出现挡住输入框的解决办法

    1，问题描述 我们使用 H5 做移动 App，或者进行移动网站开发时。如果文本输入框在整个页面的下方，当我们点击输入框要输入文字时，系统弹出的虚拟键盘就会将输入框给挡住。...（这个只有在Android 系统下会有这个问题，iOS 系统会自动将整个页面上移动。） ? ? 2，解决办法 我们可以借助元素的 scrollIntoViewIfNeeded() 方法。...这个方法执行后如果当前元素在视口中不可见，则会滚动浏览器窗口或容器元素，最终让它可见。如果当前元素在视口中已经是可见的，这个方法什么也不做。...3，样例代码 这里使用了 jQuery 绑定了所有输入框（textinput、textarea）的点击事件，这样当输入框被点击后就调用它的 scrollIntoViewIfNeeded() 方法，保证输入框可见...（延迟400毫秒出现时有些 Android 手机键盘出现的比较慢） 1 2 3 4 5 6 7 8 //防止键盘把当前输入框给挡住 $('input[type="text"],textarea').on

    2.1K20

    前端面试宝典 v1

    让利用事件冒泡的原理，让自己的所触发的事件，让他的父元素代替执行！ 62、如何阻止事件冒泡和默认事件？ 阻止浏览器的默认行为 window.event?...70、外部JS文件出现中文字符，会出现什么问题，怎么解决？ 会出现乱码，加charset=”GB2312”; 71、谈谈浏览器的内核，并且说一下什么是内核？...7、JQuery一个对象可以同时绑定多个事件，这是如何实现的？...jQuery主要用于pc端，当然有对应的jQuerymobile用于移动端，zepto比jQuery更加小巧，主要用于移动端 5、针对 jQuery 的优化方法？...3.瀑布流布局或者流式布局是否有了解 4.HTML5都有哪些新的API? 5.都用过什么代码调试工具? 6.是否有接触过或者了解过重构。 7.你遇到过比较难的技术问题是？你是如何解决的？

    2.4K41

    10 种最常见的 Javascript 错误

    是未定义的。...对于使用 JavaScript 命名空间的 Web 应用程序，这是一个 IE l浏览器的常见的问题。 在这种情况下，99.9％ 的原因是 IE 无法将当前名称空间内的方法绑定到 this 关键字。...TypeError: Cannot read property ‘length’ 这是 Chrome 中发生的错误，因为读取未定义变量的长度属性。 您可以在 Chrome 开发者控制台中进行测试。...ReferenceError: event is not defined 当您尝试访问未定义的变量或超出当前范围的变量时，会引发此错误。 您可以在 Chrome 浏览器中轻松测试。 ?...如果在使用事件处理系统时遇到此错误，请确保使用传入的事件对象作为参数。像 IE 这样的旧浏览器提供了一个全局变量事件，但并不是所有浏览器都支持。像 jQuery 这样的库试图规范化这种行为。

    6.8K80

    移动端基础

    移动端浏览器我们主要针对webkit内核进行兼容 现在移动端碎片化比较严重，分辨率和屏幕尺寸大小不一 1、移动端调试方法 Charome DevTools(谷歌浏览器) 的模拟手机调试 搭建本地...视口可分为布局视口、视觉视口和理想视口 2.1布局视口 layout viewport 一般移动设备的浏览器都默认设置了一个布局视口，用于解决早期的PC端页面在手机上显示的问题 iOS，Android...可以通过缩放去操作视觉视口，但不会影响布局视口，布局视口仍保持原来的宽度 2.3理想视口 ideal viewport 为了使网站在移动端有最理想的浏览和阅读宽度而设定 需手动添写meta视口标签通知浏览器操作...，需花费很大精力去调兼容性问题 媒体查询 bootstarp 5.移动端技术解决方案 5.1移动端浏览器 移动端浏览器基本以webkit内核为主，所以就考虑webkit兼容性问题。...5.2css初始化 normalize.css 移动端CSS初始化推荐使用normalize.css 保护了有价值的默认值 修复了浏览器bug 是模块化的 拥有详细文档 官网地址

    2K20

    1000个项目中前10名的JavaScript错误介绍

    是未定义的。...对于使用 JavaScript 命名空间的 Web 应用程序，这是一个 IE l浏览器的常见的问题。 在这种情况下，99.9％ 的原因是 IE 无法将当前名称空间内的方法绑定到 this 关键字。...TypeError: Cannot read property ‘length’ 这是 Chrome 中发生的错误，因为读取未定义变量的长度属性。...ReferenceError: event is not defined 当您尝试访问未定义的变量或超出当前范围的变量时，会引发此错误。 您可以在 Chrome 浏览器中轻松测试。...如果在使用事件处理系统时遇到此错误，请确保使用传入的事件对象作为参数。像 IE 这样的旧浏览器提供了一个全局变量事件，但并不是所有浏览器都支持。像 jQuery 这样的库试图规范化这种行为。

    6.2K10

    LT浏览器——响应式网站测试利器

    LT浏览器具有以下功能： 可以调整网络速度并验证不同网络条件下的网站行为（实测只有WiFi，low 3G，fast 3G，offline） 为您的移动网站运行性能报告，帮助您确定影响网站整体性能和排名的问题...（实测完美体验） 一键记录错误，与项目管理工具集成，团队协作以更快地修复错误。（实测需要开发能力支持，不确定钞能力要求） 本机开发人员工具可快速解决问题并随时随地验证更改。...自定义设备 找不到您喜欢的设备？使用 LT 浏览器，您可以创建自己的自定义设备视口并保存以备将来使用。...将问题连同摘要一起分配给团队成员并尽快修复错误。 ? 错误截图 ?...支持插件 在不同的网络条件下测试 它带有内置的网络模拟功能，可让在低到高的网络配置文件上测试网站，甚至可以在离线模式下测试，看看它们如何反映给实际用户。

    1.2K20
    点击加载更多

    扫码

    添加站长 进交流群

    领取专属 10元无门槛券

    手把手带您无忧上云

    扫码加入开发者社群

    相关资讯

    热门标签

    更多标签

    活动推荐

      运营活动

      活动名称
      广告关闭

      腾讯云开发者

      扫码关注腾讯云开发者

      扫码关注腾讯云开发者

      领取腾讯云代金券

      热门产品

      热门推荐

      更多推荐

      Copyright © 2013 - 2025 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有

      深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 深公网安备号 44030502008569

      腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号 | 京公网安备号11010802020287

      领券