使用模拟器调试手机浏览器

在 iOS 中调试 Safari 浏览器

打开模拟器, 在模拟器的 safari 中属于一个地址
打开 safari, 启动开发者模式 > 勾选在菜单栏中显示 “开发” 菜单
image.png
在开发中选择
image.png
这样既可测试不同系统下的 safari 显示
image.png

阅读更多

关于 100vh 和 100% 高度的一点对比

说一下出现这个问题的场景, 在 ios 15.0 场景下 100% 高度在手机滑动之后, 底部会出现空白(这大概率是 ios 15.0 的一个 bug)
验证地址 : https://vant-demo.wulicode.com/misc/height
image.png
因为 vConsole 工具也出现了这个问题
image.png
因为页面的底部出现了空白, 参见 1 图第一个屏幕的默认样式, 在这种情况下存在的一个 bug, 这种样式来源于 vue 默认框架中对于高度的定义

阅读更多

[转]Flex 布局教程:语法篇

原文地址 : Flex 布局教程:语法篇 - 阮一峰的网络日志
网页布局(layout)是 CSS 的一个重点应用。

布局的传统解决方案,基于盒状模型,依赖 [display](https://developer.mozilla.org/en-US/docs/Web/CSS/display) 属性 + [position](https://developer.mozilla.org/en-US/docs/Web/CSS/position)属性 + [float](https://developer.mozilla.org/en-US/docs/Web/CSS/float)属性。它对于那些特殊布局非常不方便,比如,垂直居中就不容易实现。

2009年,W3C 提出了一种新的方案—-Flex 布局,可以简便、完整、响应式地实现各种页面布局。目前,它已经得到了所有浏览器的支持,这意味着,现在就能很安全地使用这项功能。

Flex 布局将成为未来布局的首选方案。本文介绍它的语法,下一篇文章给出常见布局的 Flex 写法。网友 JailBreak 为本文的所有示例制作了 Demo,也可以参考。
以下内容主要参考了下面两篇文章:A Complete Guide to FlexboxA Visual Guide to CSS3 Flexbox Properties

阅读更多

部署测试加速

对于 IOS 应用的审核, 在进行包提交审核的时候经常会遇到加载 Vue 开发页面出现白屏的情况, 遇到此情况我们将 Vue 页面支持全球加速, 如果是 oss , 开启静态访问, 全球访问

服务器使用 aliyun 弗吉尼亚 进行测试

未加速

已加速


语雀镜像 : 部署测试加速 ,点此 提问

元素 client*, offset*, scroll* 介绍

Client *

clientHeight : 元素内部的高度(单位像素),包含内边距,但不包括水平滚动条、边框和外边距
clientWidth: 表示元素的内部宽度,以像素计。该属性包括内边距 padding,但不包括边框 border、外边距 margin 和垂直滚动条

image.png

阅读更多

客户端安装 Sentry 进行错误/性能跟踪

Sentry 是一个日志平台,分为客户端和服务端,客户端(目前客户端有Python, PHP,C#, Ruby等多种语言)就嵌入在你的应用程序中间,程序出现异常就向服务端发送消息,服务端将消息记录到数据库中并提供一个web节目方便查看。Sentry由python编写,源码开放,性能卓越,易于扩展,目前著名的用户有Disqus, Path, mozilla, Pinterest等

  • 性能监控(trace)
  • 错误定位(source-map)
  • 性能监控
阅读更多

[转]加快您的网站的最佳实践(Best Practices for Speeding Up Your Web Site)

又名 : 雅虎网站优化 30 条军规
原文地址 : Best Practices for Speeding Up Your Web Site
Yahoo!的 Exceptional Performance 团队为改善 Web 性能带来最佳实践。他们为此进行了 一系列的实验、开发了各种工具、写了大量的文章和博客并在各种会议上参与探讨。最佳实践的核心就是旨在提高网站性能。
Excetional Performance 团队总结出了一系列可以提高网站速度的方法。可以分为 7 大类 35 条。包括内容、服务器、cookie、CSS、JavaScript、图片、移动应用等七部分。

阅读更多

使用 pnpm 替代 yarn, npm

pnpm 的优势不用多说, 懂得自然了解了, 不懂的去官网看下他们的介绍 项目初衷 | pnpm 这里主要的目的是使用 pnpm 替换掉 yarn 和 npm

  • npm 是 node 的包管理工具, 所以我的理解是 node 是基础, 需要 npm 必须要有 node
  • yarn 作为 npm 的一个包, 必须要有 npm , 才能够使用 yarn
  • 然而 node 的版本也可以支持切换, 这样再切换 node 的时候则需要使用到 nvm , 而 nvm 是依赖于 npm 和 yarn 的.

这样造成的依赖循环逃脱不了轮回, 就会导致东西关联较多
在我了解了 pnpm 之后他可以很好的解决以上问题并且还有它自己独到的优势

  • 纯净安装, 依托于 brew
  • 可以管理全局 node , 并支持自动安装
  • 包管理使用软链接方式, 不必在多项目之间重复下载占用磁盘空间

所以就打算用他替换掉 nvm, yarn, npm 这些工具, 仅仅使用一个即可

阅读更多

Node 更换源使用国内镜像

Npm

TaoNpm 的更新流程示意图:

为什么要换源? npm 官方站点 http://www.npmjs.org/ 并没有被拦截,但是下载第三方依赖包的速度由于和外网联通的限制, 速度不能满足实际的使用需求.为了加速访问, 我们可以使用镜像来进行访问
国内有几个镜像站点可以供我们使用

速度非常快,镜像站会实时更新,为我们节省了好多时间.

阅读更多