1. 在Safari两年后，Chrome计划将地址栏移到底部。iOS上的Google Chrome测试版本现在可以将地址栏放在屏幕底部，正如MacRumors贡献者Steve Moser所发现的那样。这是一个很好的变化，可以让您将地址栏移近拇指 - 尽管值得注意的是，这是在Apple在iOS 15中默认将URL栏移至Safari底部两年后发生的。--www.theverge.com
在开发DeveMobile 与EaseMobile 主题 的时候积累了一些移动Web 开发的前端知识，本着记录总结的目的，特写这篇文章备忘一下。 要说移动Web 开发与传统的PC 端开发，感觉也没什么不同，但得益于苹果对于智能机的推动，CSS3+HTML5几乎可以毫无顾忌的使用，然后浏览器端考虑webkit内核的就差不多了。 webkit内核中一些私有的meta标签 <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="vi
如果问，CSS 中 position 属性的取值有几个？ 大部分人的回答是，大概是下面这几个吧？ { position: static; position: relative; position: absolute; position: fixed; } 额，其实，我们还可以有这 3 个取值： { /* 全局值 */ position: inherit; position: initial; position: unset; } 没了吗？偶然发
手头上有个调试Echarts地图在ios端显示情况的任务，工作电脑是win10，因此在这里，找到了方法。
移动智能终端设备由于体积限制，一般都没有鼠标、键盘这些输入设备，用户更多的操作是依靠手指在触屏上的点击或滑动等动作完成。在移动设备上，类似点击劫持的攻击模式，实现了对用户触摸屏操作的劫持攻击，即界面操作劫持攻击的又一种形式——触屏劫持。
这是掘金网页版的头部，当滚动条向下滑动时，主header会隐藏，次级header会吸在页面顶部。
最近在做一个手机主题，据说借用类似 link href="xx.png" rel="nofollow" rel="nofollow" rel="apple-touch-icon-precomposed" /的代码在apple 设备上有很好的体验，然后就搜索到一篇文章详细讲这个的，所以就转载过来，感谢原作者JeremyWei。 2014.2.22更新：建议看完本文后再看《iOS / Android 移动设备中的 Touch Icons》一文。 前言 iOS上的一个Web App（下图中的「念」）和Native
CSS中的视口单位听起来很棒。如果要设置元素的样式以占据整个屏幕的高度，则可以设置height: 100vh，您拥有一个完美的全屏元素，该元素会随着视口的变化而调整大小！可悲的是，事实并非如此。100vh在移动浏览器中以微妙但基本的方式被破坏，这使其几乎无用。最好避免100vh ，而是依靠javascript设置高度以获得完整的视口体验。
在CSS中，视口单位（Viewport units）听起来不错。如果要设置一个元素的样式使它占据整个屏幕的高度，那么你可以设置height: 100vh，这样你就拥有一个完美的全屏元素，该元素会随着视口的变化而调整大小！可惜的是，事实并非如此。100vh在移动浏览器中以一种微妙但基本的方式被破坏，使其几乎无用。最好避免使用100vh，而应该通过javascript设置高度的方式来获得完整的视口体验。
5、当网站添加到主屏幕快速启动方式，可隐藏地址栏，仅针对 ios 的 safari
一般来说，我们使用 height:100vh 进行全屏布局，这是一种很方便的响应式方法。
苹果在上周向开发者推送了iOS 15 beta 2和iPadOS 15 beta 2，这是自本月早些时候在WWDC 2021大会上首次发布以来的第一次更新。下面我们就来看看这次的更新有哪些新的内容。
1.1、工具介绍 fiddler是一个http协议调试代理工具，它能够记录并检查所有你的电脑和互联网之间的http通讯，设置断点，查看所有的“进出”fiddler的数据（指cookie,html,js,css等文件）。fiddler要比其他的网络调试器要更加简单，因为它不仅仅暴露http通讯，还提供了一个用户友好的格式。
CSS中的Viewport单元听起来很棒。如果你想将一个元素设置成全屏高度，你可以设置高度:100vh，这样你就有了一个完美的全屏元素，它会随着视口的改变而改变大小!遗憾的是，事实并非如此。100vh在不同的浏览器的实现方式上也有一点微妙的变化，这使得它几乎毫无用处。最好避免100vh，而是依赖javascript来设置高度，以获得完整的视口体验。
小技巧：不同类型的数据从 console 中打印出的颜色也不相同，可以借此判断数据类型
当库克只身一人出现在乔布斯剧场舞台上，观众席一片欢呼，但定睛一看会发现，其实这些都是memoji小人。毫不意外的，本次开发者大会同样在线上举办。
今年年初受疫情的影响，给大部分同事办公带来了不便，因此，公司今年开始着手移动办公，将部分原来需要在PC端操作的功能逐渐增加到了移动端，开发了很多的H5报表。因为是内部用的功能，在测试的时候也没有可以去关注兼容性和一些app端的专项测试，我们只是负责测试自己部门开发的轻应用，接入到公司的平台中能不能正常使用。
前言 使用VideoToolbox硬编码H.264 使用VideoToolbox硬解码H.264 使用AudioToolbox编码AAC 使用AudioToolbox播放AAC HLS点播实现（H.264和AAC码流） 在前面我们介绍了从麦克风采集声音并用AudioToolbox编码成AAC码流和从摄像头采集图像并用VideoToolbox编码成H.264码流，也尝试了把这两个格式的文件打包成TS流，并用通过HLS协议在浏览器播放，这一篇是在HLS点播实现（H.264和AAC码流）基础上的延续，进行
这是一个最好的时代，因为我们站在潮流中；但也是一个最坏的时代，因为我们站在潮头上。 META相关
image.png 2017年9月苹果发布了iPhone X机型，对于它的“刘海儿”和底部Home Indicator。我们可以通过以下三种方案进行适配~下面就让我来逐一介绍吧！ 客户端适配 解决方案 客户端直接将webview的安全区域限制在除去安全区域的区域内。页面将展示在下图灰色webview内： image.png 利弊分析 优点：H5前端开发没有任何适配工作量。 缺点：页面会限制在客户端限制的webview区域内，没有满屏效果。 使用media query 解决方案 针对iPhoneX机型
iPhone X 适配方案 2017年9月苹果发布了 iPhone X 机型，对于它的“刘海儿”和底部 Home Indicator，QQ空间 H5 也在第一时间做了兼容适配。在适配过程中，我们尝试了这三种方案，如下。 解决方案1 客户端适配 客户端直接将 webview 的安全区域限制在除去安全区域的区域内。页面将展示在下图灰色 webview 内： 利弊分析 优点：H5 前端开发没有任何适配工作量。 缺点：页面会限制在客户端限制的 webview 区域内，没有满屏效果。 解决方案2 使用 media
早在一个多月前，opera就宣布了转投WebKit引擎的消息。虽然不少藕粉表示失望，但opera终究还是完成了转型。作为opera产品系的一部分，全新webkit引擎的Android平台opera浏览器正式发布。除了新的浏览器引擎，新版本的opera还带来了一些新功能以及性能上的提升。正在使用或曾经使用过opera手机版的朋友不妨试试全新内核的opera浏览器。
Chrome已经十岁了，正式进入了少年时期，过不多久它就要长起小胡子并且声音变得嘶哑。
移动端页面设置视口宽度等于定宽（如640px），并禁止缩放，常用于微信浏览器页面。
本章节讲解Android / IOS常用的元素定位工具，针对包括原生（APP）、Web（WEBVIEW）和混合（APP与WEBVIEW）。
Progressive Web App, 简称 PWA，是提升 Web App 的体验的一种新方法，能给用户原生应用的体验。
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
把公共的 页头 、页脚、导航栏、边框 放到最顶层，比方说设置层级为 999，其他每个独立页则放在下面，然后切换页面的时候更新独立页的层级以达到效果图的效果（当然不能超过最顶层）。
兼容性：IE5.5+、FireFox15+、Chrome4+、Safari3.1+、Opera15+
📷 几天收到了这么一封邮件： 📷 一看还挺像那么回事的，但是实际上在点开地址栏之后就会发现问题了： 📷 点进去之后的页面就是最开始的那张图（http://www.systemup.org/MkvnU
对于前端开发来说，在pc端使用chrome等浏览器的开发者工具简直是好用到爆，Chrome手机模拟器可以帮助开发调试移动端web页面，然而在真机内调试起移动端web页面的时候就显得无从下手。目前已经有不少移动端的真机调试工具，本人在综合使用后推荐以下两类调试方案：chrome/safari真机调试 和 spy-debugger调试。
在全球疫情还未缓解的情况下，今年，苹果的WWDC开发者大会，和去年一样全场除了库克“空无一人”。
今天我们将研究一下能显著提升页面性能的方法 —— 资源提示与指令。你也许听说过 preload，prefetch 和 preconnect，可是我们想研究的更深一点，搞清他们之间的区别并且充分的利用它们。它们带来的好处包括允许前端开发人员来优化资源的加载，减少往返路径并且在浏览页面时可以更快的加载到资源。
我们系统程序的漏洞就叫 bug。世界上第一个 bug ，是 1946 年霍普发现了第一个电脑上的 bug，竟然是一只飞蛾“臭虫”。解决这些问题的过程叫做捉虫、调试，也就是 Debug。
macOS具有许多如此小巧而有用的功能，在您偶然发现它们或有人将它们指出给您之前，很容易错过它们。
本教程说明了Chrome和Firefox的开发工具展示了什么样的工具，用于帮助用户调试PWA。
因为版权问题公司近期大规模开始核验每位工作人员使用到的工具是否存在有侵权行为，其中Fiddler被列入了检查对象，公司发布文档暂时将该工具停用，因平常工作中需要抓取移动端的包，进行分析问题
1.地址栏中输入 chrome://net-internals/#hsts 2.在 Delete domain security policies 中输入项目的域名，并 Delete 删除 3.可以在 Query domain 测试是否删除成功
使用体验，BUG反馈 📷 更新部分 闹钟回归机械样式（但无声音）； 相机可以快速识别文字内容（目前认为升级后最方 便的功能）； Safari浏览器，UI更新，支持底部下滑切换页面，输入搜索内容更加便捷； FaceTime噪声单独处理，支持分享屏幕内容（自认为国内很少人使用，不过第三方常用软件如果可以增加这个功能的话还是很不错的）； 地图app新增四种模式，可根据不同使用场景按需切换； 非常便捷的备忘录，在“新建备忘录”空白出长按屏幕，选择“来自相机的文本”即可实现实时录入文本内容，识别正确率还是很高的； 图
Chrome 浏览器 地址栏中输入 chrome://net-internals/#hsts 在 Delete domain security policies 中输入项目的域名，并 Delete 删除 可以在 Query domain 测试是否删除成功 这里如果还是不行， 请清除浏览器缓存！ 参考文章 :如何关闭浏览器的HSTS功能 Safari 浏览器 完全关闭 Safari 删除 ~/Library/Cookies/HSTS.plist 这个文件 重新打开 Safari 即可 极少数情况下，需要重启
Hi，大家好。在进行测试的过程中，不可避免的会有程序报错，为了能更快修复掉Bug，我们作为测试人员需要给开发人员提供更准确的报错信息或者接口地址，这个时候就需要用到我们的抓包工具。
Chrome 浏览器 地址栏中输入 chrome://net-internals/#hsts 在 Delete domain security policies 中输入项目的域名，并 Delete 删除 可以在 Query domain 测试是否删除成功 这里如果还是不行， 请清除浏览器缓存！ 参考文章 :如何关闭浏览器的HSTS功能 Safari 浏览器 完全关闭 Safari 删除 ~/Library/Cookies/HSTS.plist 这个文件 重新打开 Safari 即可 极少数情况下，需要重
可以使用另一个技巧来获取更多一点的页面实际使用面积，那就是去除IOS设备上的地址栏，可以使用页面加载完之后稍稍滚动页面的招术来实现。
设置https支持，点击Capture HTTPS traffic，如果要在Windows系统进行https抓包，可以点击Trust root certificate，这样的话在Windows系统也可以进行抓包了，并且Windows系统抓包这样也设置完成了， ios端抓包设置相对比较麻烦。
声明viewport视口 viewport对于移动端设备来说非常的重要，用于定义视口的各种行为。其中最为重要的就是要设定一个展示页面的宽度width=device-width，如果我们不设置的话，width默认的值是980PX，假设我们当前用的是IPHONE 5来访问H5页面，IPHONE 5本身的宽度只有320PX，但是设备定义了H5页面展示的区域宽度应该是980PX，这样的话要想把H5页面全部进行展示，只有整体缩小大约三倍或者让用户在320PX的区域中来回的挪动才能看全整个H5页面。这种方式用户的体验度会非常的差，所以我们设定width=device-width，意思是当前设备屏幕有多宽，那么就按照多宽来渲染页面，这样就不会出现需要靠缩小或者左右移动来看完整个页面了。
一、首先，官网下载最新版fiddler工具： https://www.telerik.com/fiddler 二、打开fiddler，点击Tools - Options 我电脑上的各项配置如下图
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频
