Bleeping Computer 网站消息,美国佐治亚理工学院的研究人员公布了一种针对苹果 M 系列和 A 系列芯片进行侧信道攻击的方法,并将其命名为 iLeakage,利用该攻击方法可以从 Safari 网页浏览器中提取敏感信息。
在移动端 WEB 开发的时候(小程序也雷同),如上录屏所示,如果页面超过一屏高度出现滚动条时,在 fixed 定位的弹窗遮罩层上进行滑动,它下面的内容也会跟着一起滚动,看起来好像事件穿透到下面的DOM元素上一样,我们姑且称之为滚动穿透。
在升级到 ios11.3 系统后,阻止页面滚动的代码 e.preventDefault 代码失效了。
Safari下使用border-image,不能设置border-color: transparent。
当我们用Safari浏览器访问网页时,很多网站都会追踪IP地址并获取我们的个人信息,以便进行精准营销。
(现在大部分移动浏览器包括wp都支持viewport的width选项),这些meta标签在开发webapp时起到非常重要的作用,可以给用户提供更好的体验
自Iphone和Android这两个牛逼的手机操作系统发布以来,在互联网界从此就多了一个新的名词-WebApp(意为基于WEB形式的应用程序,运行在高端的移动终端设备)。
开发移动端的同学可能都知道,当在你用overflow-y:scorll属性的时候,内容超出容器溢出滚动的效果很迟顿,特别是在IOS系统里,通常情况下,我们为了追求好的用户体验,会使用屏幕滚动插件better-scroll了,这个插件是真心好用,但是有些情况下我们可能并不想那么麻烦,而且页面的体验要求也没有那么高,下面给大家介绍一个简单偷懒的办法.
为了解决部分历史渲染问题,实现移动端canvas渲染的新功能,以及支持后续功能扩展,对腾讯文档Doc Canvas渲染引擎的流程进行了改造,本文对改造进行介绍和小结。
一年一度2017WWDC,想来对于我们Web开发者来说还是有很多可圈可点的更新需要我们学习的,特别是在Hybrid领域开发的同学们,要知道,这些知识点就是这一年里,你可能会使用到的。
一般禁止body滚动的做法就是设置overflow:hidden。但是很奇怪的发现在移动端浏览器和微信浏览器上这个不起作用,然后我分析了我的写法,就是在body上加了一个class去定义属性,然后改成标签的定位,如body{overflow:hidden;},这个实现是可以的,没有滚动条。再进一步分析,如果要用class去实现没有滚动条,如下代码设置:
这些前缀很少手动去写,一般都用构建工具处理,我用的是gulp+autoprefixer来处理,这里我的处理范围
2019年苹果更新了 iPad mini 和 Air 的产品线,iPad 算是个相当好用的产品,比起 iPhone ,部分型号允许你外接键盘、使用触控笔等硬件来提升生产力,那么我们从软件应用开发角度可以如何帮助用户提升生产力呢?这里我将以 Safari 为参考探讨它的实现思路。
这是掘金网页版的头部,当滚动条向下滑动时,主header会隐藏,次级header会吸在页面顶部。
近日,腾讯开源跨端框架 Hippy,一周即吸引3000+star。在腾讯内部,Hippy 已运行3年之久,跨 BG 共有 18 款线上业务正在使用 Hippy,日均 PV 过亿,且已建立一套完整生态。相较于其他跨端框架,Hippy 对前端开发者更友好:紧贴 W3C 标准,遵从网页开发各项规则,使用 JavaScript 为开发语言,同时支持 React 和 Vue 两种前端主流框架。本文为大家介绍了Hippy 常用调试方法和常见问题案例,希望能够帮助开发者快速上手。
吸顶元素的初始位置一般靠近页面顶部,但与顶部有一定距离,这块区域放的是最醒目的元素,比如Banner图。页面向下滚动超过吸顶元素初始位置时,把吸顶元素固定在顶部
HTML5中新添加了很多事件,但是由于他们的兼容问题不是很理想,应用实战性不是太强,所以在这里基本省略,咱们只分享应用广泛兼容不错的事件,日后随着兼容情况提升以后再陆续添加分享。今天为大家介绍的事件主要是触摸事件:touchstart、touchmove和touchend。
viewport是移动端跨屏适配的基石,吃透这一概念,任何复杂多变的适配需求,都可以手到擒来。
这是一个最好的时代,因为我们站在潮流中;但也是一个最坏的时代,因为我们站在潮头上。 META相关
移动端页面添加 meta 标签,可以让文档的宽度与设备的宽度保持1:1,文档的最大宽度比例是1.0,不允许用户点击屏幕放大浏览。
最近给公司微信公众号,写了微信h5业务页面,总结分享一下前端开发过程中的几个兼容性坑,项目直接拿的公司页面,所以下文涉及图片都模糊处理了。
自上次参加完回音分享会后,我下定决心要洗心革面乖乖打基础,于是开启了这个part,争取两个月不间断更新,写完Material Design与iOS中的组件(顺便学学英语),以便今后在使用的时候完全不虚
当点击输入的时候,光标的高度和父盒子的高度一样。例如下图,左图是正常所期待的输入框光标,右边是ios的input光标。
如果问,CSS 中 position 属性的取值有几个? 大部分人的回答是,大概是下面这几个吧? { position: static; position: relative; position: absolute; position: fixed; } 额,其实,我们还可以有这 3 个取值: { /* 全局值 */ position: inherit; position: initial; position: unset; } 没了吗?偶然发
早在 2007 年初,苹果公司在发布首款 iPhone 前夕,遇到一个问题:当时的网站都是为大屏幕设备所设计的。于是苹果的工程师们做了一些约定,应对 iPhone 这种小屏幕浏览桌面端站点的问题。
苹果全球开发者大会(Apple Worldwide Developers Conference,缩写:WWDC)是苹果公司每年定期举办的信息技术交流活动,活动旨在向全球的软件设计师展示苹果公司最新的软件及技术,通常用于展示 macOS、iOS、iPadOS、watchOS 和 tvOS 系列以及其他苹果公司的软件和技术。
到目前为止,互联网行业里,手机越来越智能化,移动端占有的比例越来越高,尤其实在电商,新闻,广告,游戏领域。用户要求越来越高,网站功能越来越好,效果越来越炫酷,这就要求我们产品质量越来越高,web前端开发而言是一个挑战,是一个难题,也是一个机遇。如何让我们所开发的手机页面能有更好的交互体验,就是这篇文章的主旨:移动web开发问题和优化小结。这个只是我自己在开发的时候知道的坑,如果大家有遇到什么别的坑,欢迎补充,或者觉得我哪里写错了,欢迎指点!
前言 我们大前端团队内部 📖每周一练 的知识复习计划继续加油,本篇文章是 《Hybrid APP 混合应用专题》 主题的第二期和第三期的合集。 这一期共整理了 10 个问题,和相应的参考答案,文字和图片较多,建议大家可以收藏,根据文章目录来阅读。 之前分享的每周内容,我都整理到掘金收藏集 📔《EFT每周一练》 上啦,欢迎点赞收藏咯💕💕。 内容回顾: 《EFT 每周分享 —— Hybrid App 应用开发中 5 个必备知识点复习》 《EFT 每周分享 —— HTTP 的15个常
Mac 系统一向以提供高效的工作环境著称,iOS、Android和服务端程序员都可以轻松的在Mac上搭建舒适的开发环境。笔者主要从事iOS开发,一般在macbook上工作,以下是这些年累积下来的一些提升工作效率的方式,和大家分享。
css3提供了一些与当前viewpoint相关的元素,vw,vh,vmin, vmax等。
在 H5 中,我们通常会使用 REM 和 VW 这两种单位来实现页面的响应式布局。这两种单位可以让页面元素的大小随着根元素(对于 REM)或视口宽度(对于 VW)的大小变化而变化,从而适应不同尺寸的屏幕。
如果问,CSS 中 position 属性的取值有几个? 大部分人的回答是,大概是下面这几个吧?
在Web开发中,实现流畅的滚动效果对于提升用户体验至关重要。为了实现这一目标,开发人员可以利用一系列的滚动方案。其中,请求动画帧(requestAnimationFrame,简称rAF)是一种常用的技术。rAF通过优化动画效果的渲染,可以避免卡顿和过度绘制的问题。此外,还有其他滚动方案如CSS动画、滚动事件监听等等,开发人员可以根据具体需求选择合适的方案。通过合理选择和应用这些滚动方案,我们可以提供更加流畅和优化的用户体验。
在IOS端,使用 position: sticky 这个属性,使用类似于 position: relative 和 position: absolute 的结合体。在目标区域在屏幕中可见时,它的行为就像position:relative; 而当页面滚动超出目标区域时,它的表现就像position:fixed,它会固定在目标位置。
请保证将每条数据都放在一个a标签中,为何这样做?因为在触控手机上,为提升用户体验,尽可能的保证用户的可点击区域较大
开篇 笔者刚刚结束淘宝的工作,现在加入了一家有青春活力的垂直电商公司,正对着阿里巴巴的西溪园区,最近一直在熟悉新的工作环境和规范,因此博客有好些时间没有更新了,在此抱歉! 在忙碌完公司的发布系统之后,逐渐接触到具体的业务。在这里主要介绍下关于css3草案的position:sticky属性的兼容。 问题 目前前端的h5有个需求,就是“当页面上的若干个标题被拖动到视口的顶部时,则显示一个被定位到视口的顶部的tab标签,可对这个tab标签进行点击导航,并在某个特殊的情况下隐藏”。最简单粗暴的做法就是针对doc
好的前端工程师,会更注重用户的体验和交互。那么动画就是将我们的静态页面,变成具有灵动性,为我们的界面添加个性的一种方式。
前言 我们大前端团队内部 ?每周一练 的知识复习计划继续加油,本篇文章是 《Hybrid APP 混合应用专题》 主题的第二期和第三期的合集。 这一期共整理了 10 个问题,和相应的参考答案,文字和图
9月13日凌晨终于等来了万众瞩目的苹果新品发布会,相信很多小伙伴们都期待新 iphone 可以剪掉刘海胡子,但万万没想到的是等来了三款不同的尺寸的 iphone x ,我的天,等了这么久你给我看这个?码农慌得一批满地找新 iphone 的逻辑像素,然后想着怎么兼容这刘海和胡子。
有时候我们需要将元素滚动到可见区域,怎么办?使用 scrollIntoView 就足够了。
通过阅读本文,你可以通过css 中overcroll-behavior属性值的设置,处理浏览器溢出滚动,以及禁用移动设备上刷新,下拉滚动时的发光和橡皮圈回弹效果,当然也可以看到css中 Houndini(胡迪宁),也就是css中也可以写变量等知识,如果文有误导的地方,欢迎路过的老师拍砖指正
Mac中主要有四个修饰键,分别是Command,Control,Option和Shift。
作为一个开发了多个 H5 项目的前端工程师,在开发过程中难免会遇到一些兼容性等爬过坑的问题。现在我将这些问题一一汇总一下,并在后面给出坑产生的原理,和现阶段常规的填坑方案。由此来做一个阶段性的总结。
UIWebView 是苹果继承于 UIView 封装的一个加载 web 内容的类,它可以加载任何远端的web数据展示在你的页面上,你可以像浏览器一样前进后退刷新等操作。不过苹果在 iOS8 以后推出了 WKWebView 来加载 Web,并应用于 iOS 和 OSX 中,它取代了 UIWebView 和 WebView ,在两个平台上支持同一套 API。
在开发DeveMobile 与EaseMobile 主题 的时候积累了一些移动Web 开发的前端知识,本着记录总结的目的,特写这篇文章备忘一下。 要说移动Web 开发与传统的PC 端开发,感觉也没什么不同,但得益于苹果对于智能机的推动,CSS3+HTML5几乎可以毫无顾忌的使用,然后浏览器端考虑webkit内核的就差不多了。 webkit内核中一些私有的meta标签 <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="vi
领取专属 10元无门槛券
手把手带您无忧上云