Safari浏览器内容被地址栏、菜单栏或工具栏遮挡导致的兼容问题
最近写了一个网页,页面很多元素使用的是Fixed定位,当在手机端的Safari浏览器、安卓浏览器等测试时,会出现顶部元素、底部元素 被地址栏、菜单栏或工具栏遮挡的情况。于是,我查阅了相关资料,发现了一些解决方案,在iOS设备上使用Safari浏览器时,开发者经常会遇到内容被地址栏、菜单栏或工具栏遮挡的问题。本文将探讨如何使用 viewport-fit 属性和CSS的 env() 函数来解决这些问题。 viewport-fit属性viewport-fit 属性是iOS Safari 13.4+ 引入的新属性,它可以用来控制页面内容的缩放行为。 viewport-fit=cover:内容会被充满整个视窗,即内容不会被裁剪,但可能会被拉伸。 viewport-fit=contain:内容会被缩放,以适应视窗的大小,但不会被裁剪。 viewport-fit=auto:默认值,内容会根据设备的方向和大小进行缩放,以适应视窗的大小。 1<meta name="viewport" content="viewport-fit=cover"...
通义灵码:重塑编程的未来,引领技术革新
人工智能如火如荼,对程序员来说,一款智能好用的编码工具必不可少,分享目前正在使用的编码工具《通义灵码》虽然处于公测状态,但丝毫不影响使用,有兴趣的可以去看看 通义灵码,是阿里云出品的一款基于通义大模型的智能编码辅助工具,提供行级/函数级实时续写、自然语言生成代码、单元测试生成、代码注释生成、代码解释、研发智能问答、异常报错排查等能力,并针对阿里云 SDK/OpenAPI 的使用场景调优,助力开发者高效、流畅的编码。 兼容 Visual Studio Code、JetBrains IDEs 等主流 IDE; 支持 Java、Python、Go、C/C++、JavaScript、TypeScript、PHP、Ruby、Rust、Scala 等主流编程语言。 那么既然说到这里了,有人肯定会担心收费问题,具体可看下表 收费模式 套餐类型 基础版-免费使用 高级版-立即购买 资费 0 元/人/年 618...
树莓派在Docker中部署Samba
准备12# 拉取镜像sudo docker pull dperson/samba:latest 配置文件12345678# 在你喜欢的地方创建配置文件# /mnt/HanSSD/Docker/DockerData/samba/smb.conf[HanSSD_SMB] comment = Shared Folder path = /share browseable = yes read only = no valid users = hanfile 部署123456sudo docker run -d --name samba \-p 445: 445 \-v /mnt/HanSSD/Docker/DockerData/samba:/etc/samba \-v /mnt/HanSSD/SAMBA_SHARE:/share \--restart=always \dperson/samba:latest 创建用户12345# 进入docker终端sudo docker exec -it samba /bin/bash#...
树莓派4B(Raspberry Pi OS Lite 64-bit)安装Docker
更新12345# 必执行sudo apt updatesudo apt upgradesudo apt install ca-certificates curl gnupg 添加Docker官方GPG密钥123sudo install -m 0755 -d /etc/apt/keyringscurl -fsSL https://download.docker.com/linux/debian/gpg | sudo gpg --dearmor -o /etc/apt/keyrings/docker.gpgsudo chmod a+r /etc/apt/keyrings/docker.gpg 设置Docker存储库123456echo \ "deb [arch="$(dpkg --print-architecture)" signed-by=/etc/apt/keyrings/docker.gpg] https://download.docker.com/linux/debian \ "$(. /etc/os-release...
变相跳出forEach循环
众所周知,forEach循环是无法中途跳出循环的,有点同学说不是可以通过抛出错误跳出循环吗?是的。抛出异常是广为流传的一种方法,结果是我们想要,但是你看代码,哪个正常人会这样写代码?是非forEach不用吗?还是其他的循环关键字不配呢。 forEach抛出异常跳出循环1234567891011const list = [1, 2, 3, 4, 5, "a", "b", "c", "d", "e"];try { list.forEach((itm) => { if (itm === "c") { throw new Error("exit"); } console.log(itm); });} catch (e) { // console.log(e);} splice变相跳出循环1234567const list...
Vue3项目Build后部署在Nginx上F5刷新页面空白或404
环境vue-cli 5.xvue-router 4.xNginx 综述使用Vue3项目Vue-router4开发完毕后项目Build打包部署线上环境后,首页能正常访问菜单内点击切换也没有问题,但当你刷新页面后,则出现 404 Not Found,故在此记录一下解决办法 解决思路在与chatGPT进行深刻激烈的探讨后,确定了是Nginx的问题,根据chatGPT的引导进行配置依旧无法解决,刷新页面时访问的资源在服务端找不到,因为此时vue-router设置路由地址被当作url地址,此时的地址路径肯定不是真实存在的,所以出现404现象。之所以出现上面的现象,是因为在nginx配置的根目录/www/wwwroot/dist下面压根没有’XXX/xxx/xxx’这个真实资源存在,这些访问资源都是在js里渲染的。 12345678# 服务端nginx的一开始配置如下(假设域名为:www.vvhan.com):server{ listen 80; server_name www.vvhan.com; ...
Ant Design Vue 4.0 侧边导航栏Menu组件封装
Ant Design Vue 4.0 a-modal弹窗组件封装 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778<template> <a-layout-sider class="menu-main"> <div class="logo">Han</div> <a-menu v-model:selectedKeys="routerPathKey" theme="light" mode="inline" @click="onTitleClick" ...
Ant Design Vue 4.0 a-modal弹窗组件封装
父组件(部分)123456789101112131415161718192021222324252627282930313233343536<template> <div class="main"> <a-button type="primary" ghost @click="dialogPanelStatus.signIngInfoStatus = true" >签约信息</a-button > </div> <!-- 签约信息 --> <SigningInfo :signIngInfoStatus="dialogPanelStatus.signIngInfoStatus" :walletData="walletData" @closeDialog="closeDialog" ...
Vue3 + Vite + Vue Router 4后端返回路由配置动态路由权限管理
动态路由12345678910111213141516171819202122232425262728293031323334353637// 路由递归处理const AllRouter = import.meta.glob("@/views/**/*.vue");interface RouterItem { path: string; name: string; component: () => any; children?: RouterItem[]; meta: { title: string; icon: string; };}const routerFormat = (routerList: any): RouterItem[] => { if (!routerList || !Array.isArray(routerList)) return []; return routerList.map((item: any) => { ...