移动端疑难杂症解决方案完全指南

HTML 方向

调用系统功能

使用<a>能快速调用移动设备的电话/短信/邮件三大通讯功能，使用<input>能快速调用移动设备的的图库/文件。

这些功能方便了页面与系统的交互，关键在于调用格式一定要准确，否则会被移动端浏览器忽略。

<!-- 拨打电话 -->
<a href="tel:10086">拨打电话给10086小姐姐</a><!-- 发送短信 -->
<a href="sms:10086">发送短信给10086小姐姐</a><!-- 发送邮件 -->
<a href="mailto:young.joway@aliyun.com">发送邮件给JowayYoung</a><!-- 选择照片或拍摄照片 -->
<input type="file" accept="image/*" /><!-- 选择视频或拍摄视频 -->
<input type="file" accept="video/*" /><!-- 多选文件 -->
<input type="file" multiple />

忽略自动识别

有些移动端浏览器会自动将数字字母符号识别为电话/邮箱并将其渲染成上述调用系统功能里的<a>。虽然很方便却有可能违背需求。

<!-- 忽略自动识别电话 -->
<meta name="format-detection" content="telephone=no" /><!-- 忽略自动识别邮箱 -->
<meta name="format-detection" content="email=no" /><!-- 忽略自动识别电话和邮箱 -->
<meta name="format-detection" content="telephone=no, email=no" />

弹出数字键盘

使用<input type="tel">弹起数字键盘会带上#和*，适合输入电话。推荐使用<input type="number" pattern="\d*">弹起数字键盘，适合输入验证码等纯数字格式。

<!-- 纯数字带#和* -->
<input type="tel" /><!-- 纯数字 -->
<input type="number" pattern="\d*" />

唤醒原生应用

通过location.href与原生应用建立通讯渠道，这种页面与客户端的通讯方式称为URL Scheme，其基本格式为scheme://[path][?query]，笔者曾经发表过《H5 与 App 的通讯方式》讲述URL Scheme的使用。

scheme：应用标识，表示应用在系统里的唯一标识
path：应用行为，表示应用某个页面或功能
query：应用参数，表示应用页面或应用功能所需的条件参数

URL Scheme一般由前端与客户端共同协商。唤醒原生应用的前提是必须在移动设备里安装了该应用，有些移动端浏览器即使安装了该应用也无法唤醒原生应用，因为它认为URL Scheme是一种潜在的危险行为而禁用它，像Safari和微信浏览器。还好微信浏览器可开启白名单让URL Scheme有效。

若在页面引用第三方原生应用的URL Schema，可通过抓包第三方原生应用获取其URL。

<!-- 打开微信 -->
<a href="weixin://">打开微信</a><!-- 打开支付宝 -->
<a href="alipays://">打开支付宝</a><!-- 打开支付宝的扫一扫 -->
<a href="alipays://platformapi/startapp?saId=10000007">打开支付宝的扫一扫</a><!-- 打开支付宝的蚂蚁森林 -->
<a href="alipays://platformapi/startapp?appId=60000002">打开支付宝的蚂蚁森林</a>

禁止页面缩放

在智能手机的普及下，很多网站都具备桌面端和移动端两种浏览版本，因此无需双击缩放查看页面。禁止页面缩放可保障移动端浏览器能无遗漏地展现页面所有布局。

<metaname="viewport"content="width=device-width, user-scalable=no, initial-scale=1, minimum-scale=1, maximum-scale=1"
/>

禁止页面缓存

Cache-Control指定请求和响应遵循的缓存机制，不想使用浏览器缓存就禁止呗！

<meta http-equiv="Cache-Control" content="no-cache" />

禁止字母大写

有时在输入框里输入文本会默认开启首字母大写纠正，就是输入首字母小写会被自动纠正成大写，特么的烦。直接声明autocapitalize=off关闭首字母大写功能和autocorrect=off关闭纠正功能。

<input autocapitalize="off" autocorrect="off" />

针对 Safari 配置

贴一些Safari较零散且少用的配置。

<!-- 设置Safari全屏，在iOS7+无效 -->
<meta name="apple-mobile-web-app-capable" content="yes" /><!-- 改变Safari状态栏样式，可选default/black/black-translucent，需在上述全屏模式下才有效 -->
<meta name="apple-mobile-web-app-status-bar-style" content="black" /><!-- 添加页面启动占位图 -->
<linkrel="apple-touch-startup-image"href="pig.jpg"media="(device-width: 375px)"
/><!-- 保存网站到桌面时添加图标 -->
<link rel="apple-touch-icon" sizes="76x76" href="pig.jpg" /><!-- 保存网站到桌面时添加图标且清除默认光泽 -->
<link rel="apple-touch-icon-precomposed" href="pig.jpg" />

针对其他浏览器配置

贴一些其他浏览器较零散且少用的配置，主要是常用的QQ浏览器、UC浏览器和360浏览器。从网易 MTL 的测试数据得知，新版的QQ浏览器和UC浏览器已不支持以下<meta>声明了。

<!-- 强制QQ浏览器竖屏 -->
<meta name="x5-orientation" content="portrait" /><!-- 强制QQ浏览器全屏 -->
<meta name="x5-fullscreen" content="true" /><!-- 开启QQ浏览器应用模式 -->
<meta name="x5-page-mode" content="app" /><!-- 强制UC浏览器竖屏 -->
<meta name="screen-orientation" content="portrait" /><!-- 强制UC浏览器全屏 -->
<meta name="full-screen" content="yes" /><!-- 开启UC浏览器应用模式 -->
<meta name="browsermode" content="application" /><!-- 开启360浏览器极速模式 -->
<meta name="renderer" content="webkit" />

让:active 有效，让:hover 无效

有些元素的:active可能会无效，而元素的:hover在点击后会一直处于点击状态，需点击其他位置才能解除点击状态。给<body>注册一个空的touchstart事件可将两种状态反转。

<body ontouchstart></body>

CSS 方向

自动适应布局

针对移动端，笔者通常会结合 JS 依据屏幕宽度与设计图宽度的比例动态声明<html>的font-size，以rem为长度单位声明所有节点的几何属性，这样就能做到大部分移动设备的页面兼容，兼容出入较大的地方再通过媒体查询做特别处理。

笔者通常将rem布局比例设置成1rem=100px，即在设计图上100px长度在 CSS 代码上使用1rem表示。

function AutoResponse(width = 750) {const target = document.documentElement;if (target.clientWidth >= 600) {target.style.fontSize = "80px";} else {target.style.fontSize = (target.clientWidth / width) * 100 + "px";}
}
AutoResponse();
window.addEventListener("resize", () => AutoResponse());

当然还可依据屏幕宽度与设计图宽度的比例使用calc()动态声明<html>的font-size，这样就能节省上述代码。不对，是完全代替上述代码。

html {font-size: calc(100vw / 7.5);
}

若以iPad Pro分辨率1024px为移动端和桌面端的断点，还可结合媒体查询做断点处理。1024px以下使用rem布局，否则不使用rem布局。

@media screen and (max-width: 1024px) {html {font-size: calc(100vw / 7.5);}
}

自动适应背景

使用rem布局声明一个元素背景，多数情况会将background-size声明为cover。可能在设计图对应分辨率的移动设备下，背景会完美贴合显示，但换到其他分辨率的移动设备下就会出现左右空出1px到npx的空隙。

此时将background-size声明为100% 100%，跟随width和height的变化而变化。反正width和height都是量好的实际尺寸。

.elem {width: 1rem;height: 1rem;background: url("pig.jpg") no-repeat center/100% 100%;
}

监听屏幕旋转

你还在使用 JS 判断横屏竖屏调整样式吗？那就真的Out了。

/* 竖屏 */
@media all and (orientation: portrait) {/* 自定义样式 */
}
/* 横屏 */
@media all and (orientation: landscape) {/* 自定义样式 */
}

支持弹性滚动

在苹果系统上非<body>元素的滚动操作可能会存在卡顿，但安卓系统不会出现该情况。通过声明overflow-scrolling:touch调用系统原生滚动事件优化弹性滚动，增加页面滚动的流畅度。

body {-webkit-overflow-scrolling: touch;
}
.elem {overflow: auto;
}

禁止滚动传播

与桌面端浏览器不一样，移动端浏览器有一个奇怪行为。当页面包含多个滚动区域时，滚完一个区域后若还存在滚动动量则会将这些剩余动量传播到下一个滚动区域，造成该区域也滚动起来。这种行为称为滚动传播。

若不想产生这种奇怪行为可直接禁止。

.elem {overscroll-behavior: contain;
}

禁止屏幕抖动

对于一些突然出现滚动条的页面，可能会产生左右抖动的不良影响。在一个滚动容器里，打开弹窗就隐藏滚动条，关闭弹窗就显示滚动条，来回操作会让屏幕抖动起来。提前声明滚动容器的padding-right为滚动条宽度，就能有效消除这个不良影响。

每个移动端浏览器的滚动条宽度都有可能不一致，甚至不一定占位置，通过以下方式能间接计算出滚动条的宽度。100vw为视窗宽度，100%为滚动容器内容宽度，相减就是滚动条宽度，妥妥的动态计算。

body {padding-right: calc(100vw - 100%);
}

禁止长按操作

有时不想用户长按元素呼出菜单进行点链接、打电话、发邮件、保存图片或扫描二维码等操作，声明touch-callout:none禁止用户长按操作。

有时不想用户复制粘贴盗文案，声明user-select:none禁止用户长按操作和选择复制。

* {/* pointer-events: none; */ /* 微信浏览器还需附加该属性才有效 */user-select: none; /* 禁止长按选择文字 */-webkit-touch-callout: none;
}

但声明user-select:none会让<input>和<textarea>无法输入文本，可对其声明user-select:auto排除在外。

input,
textarea {user-select: auto;
}

禁止字体调整

旋转屏幕可能会改变字体大小，声明text-size-adjust:100%让字体大小保持不变。

* {text-size-adjust: 100%;
}

禁止高亮显示

触摸元素会出现半透明灰色遮罩，不想要！

* {-webkit-tap-highlight-color: transparent;
}

禁止动画闪屏

在移动设备上添加动画，多数情况会出现闪屏，给动画元素的父元素构造一个3D环境就能让动画稳定运行了。

.elem {perspective: 1000;backface-visibility: hidden;transform-style: preserve-3d;
}

美化表单外观

表单元素样式太丑希望自定义，appearance:none来帮你。

button,
input,
select,
textarea {appearance: none;/* 自定义样式 */
}

美化滚动占位

滚动条样式太丑希望自定义，::-webkit-scrollbar-*来帮你。记住以下三个关键词就能随机应变了。

::-webkit-scrollbar：滚动条整体部分
::-webkit-scrollbar-track：滚动条轨道部分
::-webkit-scrollbar-thumb：滚动条滑块部分

::-webkit-scrollbar {width: 6px;height: 6px;background-color: transparent;
}
::-webkit-scrollbar-track {background-color: transparent;
}
::-webkit-scrollbar-thumb {border-radius: 3px;background-image: linear-gradient(135deg, #09f, #3c9);
}

美化输入占位

输入框占位文本太丑，::-webkit-input-placeholder来帮你。

input::-webkit-input-placeholder {color: #66f;
}

对齐输入占位

有强迫症的同学总会觉得输入框文本位置整体偏上，感觉未居中心里就痒痒的。桌面端浏览器里声明line-height等于height就能解决，但移动端浏览器里还是未能解决，需将line-height声明为normal才行。

input {line-height: normal;
}

对齐下拉选项

下拉框选项默认向左对齐，是时候改改向右对齐了。

select option {direction: rtl;
}

修复点击无效

在苹果系统上有些情况下非可点击元素监听click事件可能会无效，针对该情况只需对不触发click事件的元素声明cursor:pointer就能解决。

.elem {cursor: pointer;
}

识别文本换行

多数情况会使用 JS 换行文本，那就真的Out了。若接口返回字段包含\n或<br>，千万别替换掉，可声明white-space:pre-line交由浏览器做断行处理。

* {white-space: pre-line;
}

开启硬件加速

想动画更流畅吗，开启GPU硬件加速呗！

.elem {transform: translate3d(0, 0, 0);/* transform: translateZ(0); */
}

描绘像素边框

万年话题，如何描绘一像素边框？

.elem {position: relative;width: 200px;height: 80px;&::after {position: absolute;left: 0;top: 0;border: 1px solid #f66;width: 200%;height: 200%;content: "";transform: scale(0.5);transform-origin: left top;}
}

控制溢出文本

万年话题，如何控制文本做单行溢出和多行溢出？

.elem {width: 400px;line-height: 30px;font-size: 20px;&.sl-ellipsis {overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}&.ml-ellipsis {display: -webkit-box;overflow: hidden;text-overflow: ellipsis;-webkit-line-clamp: 3;-webkit-box-orient: vertical;}
}

JavaScript 方向

禁止点击穿透

移动端浏览器里点击操作会存在300ms延迟，往往会造成点击延迟甚至点击无效，这个是众所周知的事情。

2007年苹果发布首款iPhone搭载的Safari为了将桌面端网站能较好地展示在移动端浏览器上而使用了双击缩放。该方案就是上述300ms延迟的主要原因，当用户执行第一次单击后会预留300ms检测用户是否继续执行单击，若是则执行缩放操作，若否则执行点击操作。鉴于该方案的成功，其他移动端浏览器也复制了该方案，现在几乎所有移动端浏览器都配备该功能。而该方案引发的点击延迟被称为点击穿透。

在前端领域里最早解决点击穿透是jQuery时代的zepto，估计现在大部分同学都未使用过zepto，其实它就是移动端版本的jquery。zepto封装tap事件能有效地解决点击穿透，通过监听document上的touch事件完成tap事件的模拟，并将tap事件冒泡到document上触发。

在移动端浏览器上不使用click事件而使用touch事件是因为click事件有着明显的延迟，后续又出现fastclick。该解决方案监听用户是否做了双击操作，可正常使用click事件，而点击穿透就交给fastclick自动判断。更多fastclick原理可自行百度，在此不作过多介绍。

fastclick有现成的NPM包，可直接安装到项目里。引入fastclick可使用click事件代替tap事件，接入方式极其简单。

import Fastclick from "fastclick";FastClick.attach(document.body);

禁止滑动穿透

移动端浏览器里出现弹窗时，若在屏幕上滑动能触发弹窗底下的内容跟着滚动，这个是众所周知的事情。

首先明确解决滑动穿透需保持哪些交互行为，那就是除了弹窗内容能点击或滚动，其他内容都不能点击或滚动。目前很多解决方案都无法做到这一点，全部解决方案都能禁止<body>的滚动行为却引发其他问题。

弹窗打开后内部内容无法滚动
弹窗关闭后页面滚动位置丢失
Webview能上下滑动露出底色

当打开弹窗时给<body>声明position:fixed;left:0;width:100%并动态声明top。声明position:fixed会导致<body>滚动条消失，此时会发现虽然无滑动穿透，但页面滚动位置早已丢失。通过scrollingElement获取页面当前滚动条偏移量并将其取负值且赋值给top，那么在视觉上就无任何变化。当关闭弹窗时移除position:fixed;left:0;width:100%和动态top。

scrollingElement可兼容地获取scrollTop和scrollHeight等属性，在移动端浏览器里屡试不爽。document.scrollingElement.scrollHeight可完美代替曾经的document.documentElement.scrollHeight || document.body.scrollHeight，一眼看上去就是代码减少了。

该解决方案在视觉上无任何变化，完爆其他解决方案，其实就是一种反向思维和障眼法。该解决方案完美解决固定弹窗和滚动弹窗对<body>全局滚动的影响，当然也可用于局部滚动容器里，因此很值得推广。

body.static {position: fixed;left: 0;width: 100%;
}

const body = document.body;
const openBtn = document.getElementById("open-btn");
const closeBtn = document.getElementById("close-btn");
openBtn.addEventListener("click", (e) => {e.stopPropagation();const scrollTop = document.scrollingElement.scrollTop;body.classList.add("static");body.style.top = `-${scrollTop}px`;
});
closeBtn.addEventListener("click", (e) => {e.stopPropagation();body.classList.remove("static");body.style.top = "";
});

支持往返刷新

点击移动端浏览器的前进按钮或后退按钮，有时不会自动执行旧页面的 JS 代码，这与往返缓存有关。这种情况在Safari上特别明显，简单概括就是往返页面无法刷新。

往返缓存指浏览器为了在页面间执行前进后退操作时能拥有更流畅体验的一种策略，以下简称BFCache。该策略具体表现为：当用户前往新页面前将旧页面的 DOM 状态保存在BFCache里，当用户返回旧页面前将旧页面的 DOM 状态从BFCache里取出并加载。大部分移动端浏览器都会部署BFCache，可大大节省接口请求的时间和带宽。

了解什么是BFCache再对症下药，解决方案就在window.onunload上做文章。

// 在新页面监听页面销毁事件
window.addEventListener("onunload", () => {// 执行旧页面代码
});

若在Vue SPA上使用keep-alive也不能让页面刷新，可将接口请求放到beforeRouteEnter()里。

当然还有另一种解决方案。pageshow事件在每次页面加载时都会触发，无论是首次加载还是再次加载都会触发，这就是它与load事件的区别。pageshow事件暴露的persisted可判断页面是否从BFCache里取出。

window.addEventListener("pageshow", (e) => e.persisted && location.reload());

若浏览器不使用<meta http-equiv="Cache-Control" content="no-cache">禁用缓存，该解决方案还是很值得一用。

解析有效日期

在苹果系统上解析YYYY-MM-DD HH:mm:ss这种日期格式会报错Invalid Date，但在安卓系统上解析这种日期格式完全无问题。

new Date("2019-03-31 21:30:00"); // Invalid Date

查看Safari相关开发手册发现可用YYYY/MM/DD HH:mm:ss这种日期格式，简单概括就是年月日必须使用/衔接而不能使用-衔接。当然安卓系统也支持该格式，然而接口返回字段的日期格式通常是YYYY-MM-DD HH:mm:ss，那么需替换其中的-为/。

const date = "2019-03-31 21:30:00";
new Date(date.replace(/\-/g, "/"));

修复高度坍塌

当页面同时出现以下三个条件时，键盘占位会把页面高度压缩一部分。当输入完成键盘占位消失后，页面高度有可能回不到原来高度，产生坍塌导致Webview底色露脸，简单概括就是输入框失焦后页面未回弹。

页面高度过小
输入框在页面底部或视窗中下方
输入框聚焦输入文本

只要保持前后滚动条偏移量一致就不会出现上述问题。在输入框聚焦时获取页面当前滚动条偏移量，在输入框失焦时赋值页面之前获取的滚动条偏移量，这样就能间接还原页面滚动条偏移量解决页面高度坍塌。

const input = document.getElementById("input");
let scrollTop = 0;
input.addEventListener("focus", () => {scrollTop = document.scrollingElement.scrollTop;
});
input.addEventListener("blur", () => {document.scrollingElement.scrollTo(0, this.scrollTop);
});

修复输入监听

在苹果系统上的输入框输入文本，keyup/keydown/keypress事件可能会无效。当输入框监听keyup事件时，逐个输入英文和数字会有效，但逐个输入中文不会有效，需按回车键才会有效。

此时可用input事件代替输入框的keyup/keydown/keypress事件。

简化回到顶部

曾几何时编写一个返回顶部函数麻烦得要死，需scrollTop、定时器和条件判断三者配合才能完成。其实 DOM 对象里隐藏了一个很好用的函数可完成上述功能，一行核心代码就能搞定。

该函数就是scrollIntoView，它会滚动目标元素的父容器使之对用户可见，简单概括就是相对视窗让容器滚动到目标元素位置。它有三个可选参数能让scrollIntoView滚动起来更优雅。

behavior：动画过渡效果，默认auto无，可选smooth平滑
inline：水平方向对齐方式，默认nearest就近对齐，可选start顶部对齐、center中间对齐和end底部对齐
block：垂直方向对齐方式，默认start顶部对齐，可选center中间对齐、end底部对齐和nearest就近对齐

const gotopBtn = document.getElementById("gotop-btn");
openBtn.addEventListener("click", () =>document.body.scrollIntoView({ behavior: "smooth" })
);

当然还可滚动到目标元素位置，只需将document.body修改成目标元素的 DOM 对象。一行核心代码就能搞掂的事情为何还编写那么多代码去完成，不累吗？

简化懒性加载

与上述简化回到顶部一样，编写一个懒性加载函数也同样需scrollTop、定时器和条件判断三者配合才能完成。其实 DOM 对象里隐藏了一个很好用的函数可完成上述功能，该函数无需监听容器的scroll事件，通过浏览器自身机制完成滚动监听。

该函数就是IntersectionObserver，它提供一种异步观察目标元素及其祖先元素或顶级文档视窗交叉状态的方法。详情可参照MDN 文档，在此不作过多介绍。

懒性加载的第一种使用场景：图片懒加载。只需确认图片进入可视区域就赋值加载图片，赋值完成还需对图片停止监听。

<img data-src="pig.jpg" />
<!-- 很多<img> -->

const imgs = document.querySelectorAll("img.lazyload");
const observer = new IntersectionObserver((nodes) => {nodes.forEach((v) => {if (v.isIntersecting) {// 判断是否进入可视区域v.target.src = v.target.dataset.src; // 赋值加载图片observer.unobserve(v.target); // 停止监听已加载的图片}});
});
imgs.forEach((v) => observer.observe(v));

懒性加载的第二种使用场景：下拉加载。在列表最底部部署一个占位元素且该元素无任何高度或实体外观，只需确认占位元素进入可视区域就请求接口加载数据。

<ul><li></li><!-- 很多<li> -->
</ul>
<!-- 也可将#bottom以<li>的形式插入到<ul>内部的最后位置 -->
<div id="bottom"></div>

const bottom = document.getElementById("bottom");
const observer = new IntersectionObserver((nodes) => {const tgt = nodes[0]; // 反正只有一个if (tgt.isIntersecting) {console.log("已到底部，请求接口");// 执行接口请求代码}
});
bottom.observe(bottom);

优化扫码识别

通常移动端浏览器都会配备长按二维码图片识别链接的功能，但长按二维码可能无法识别或错误识别。二维码表面看上去是一张图片，可二维码生成方式却五花八门，二维码生成方式有以下三种。

使用<img>渲染
使用<svg>渲染
使用<canvas>渲染

从网易 MTL 的测试数据得知，大部分移动端浏览器只能识别<img>渲染的二维码，为了让全部移动端浏览器都能识别二维码，那只能使用<img>渲染二维码了。若使用SVG和Canvas的方式生成二维码，那就想方设法把二维码数据转换成Base64再赋值到<img>的src上。

一个页面可能存在多个二维码，若长按二维码只能识别最后一个，那只能控制每个页面只存在一个二维码。

自动播放媒体

常见媒体元素包括音频<audio>和视频<video>，为了让用户得到更好的媒体播放体验与不盲目浪费用户流量，大部分移动端浏览器都明确规定不能自动播放媒体或默认屏蔽autoplay。为了能让媒体在页面加载完成后自动播放，只能显式声明播放。

const audio = document.getElementById("audio");
const video = document.getElementById("video");
audio.play();
video.play();

对于像微信浏览器这样的内置浏览器，还需监听其应用 SDK 加载完成才能触发上述代码，以保障WebView正常渲染。其他内置浏览器同理，在此不作过多介绍。

document.addEventListener("WeixinJSBridgeReady", () => {// 执行上述媒体自动播放代码
});

在苹果系统上明确规定用户交互操作开始后才能播放媒体，未得到用户响应会被Safari自动拦截，因此需监听用户首次触摸操作并触发媒体自动播放，而该监听仅此一次。

document.body.addEventListener("touchstart",() => {// 执行上述媒体自动播放代码},{ once: true }
);

查看全文
如若内容造成侵权/违法违规/事实不符，请联系编程学习网邮箱：809451989@qq.com进行投诉反馈，一经查实，立即删除！

搭建蓝莲花xss测试平台
下载地址github : https://github.com/trysec/BlueLotus_XSSReceiver 一、前言决定搭建XSS平台是因为自己想深入学习一下XSS相关的知识，多多进行实践，上网搜索了一下XSS平台有很多，但是总觉得不是很安全，这个毕竟敏感信息要传…...
2024/4/19 13:39:53
2016-2027年全球与中国板翅式换热器行业市场深度调研及投资预测报告
2016-2027年全球与中国板翅式换热器行业市场深度调研及投资预测报告 2020年中国板翅式换热器市场规模达到了亿元，预计2027年可以达到亿元，未来几年年复合增长率(CAGR)为 % (2021-2027)。本报告研究中国市场板翅式换热器的发展现状及未来发展趋势&…...
2024/4/7 1:12:41
Python文件Exe化
Section 1 - 创建纯python环境创建一个python环境，最好32位的，这样执行生成的exe可以在32位系统和64位系统上运行，此外，打包编译的exe也不至于过于庞大，以及出现总是打包不成功的问题。 Section 2 - 执行pip instal…...
2024/4/17 5:31:20
2021-10-27-前端面试题-005
一、简答题 1. 简述git fetch命令和git pull命令的区别，它们都在什么情况下使用？ fetch命令和pull命令都是从远程仓库拉取更新的命令 fetch命令直接从远程仓库拉取指定分支的更新到本地对应的分支 pull命令从远程仓库拉取指定的分支更新到本地并合并到当…...
2024/4/17 19:45:56
FPGA基础知识----第三章第1节 Verilog 的历史
第1节 Verilog 的历史在传统硬件电路的设计方法中，当设计工程师需要设计一个新的硬件、数字电路或数字逻辑系统时，需要为此设计并画出一张线路图， 随后在 CAE（计算机辅助工程分析）工作站上进行设计。所设计的线路图由…...
2024/4/19 17:10:55
解决 echarts 打印不显示的问题
关于echarts图表打印不显示的问题，搜遍了度娘…记录一个完整的解决方案此代码是存放将图表转换成图片存放在img标签中 <img src="" alt="" id="pchart" style="display: none;"> <div id="tjDivDay" style=&q…...
2024/4/20 1:42:33
程序员在火车站写代码遭围攻，程序员：没见过世面？
往期好文推荐 0基础不用怕，从0到1轻松教你入门Python python系统学习流线图，教你一步一步学会python 大过节的，许多在外打拼的人们纷纷奔向回家的路程，原本该是欢声笑语的一路，可是却因为工作缠身而显得有些那么不美…...
2024/4/15 3:35:37
2020icpc上海 Mine Sweeper II （思维）
题目链接：B-Mine Sweeper II_第 45 届国际大学生程序设计竞赛（ICPC）亚洲区域赛（上海） (nowcoder.com)a 题目大意：给你两个大小为 n * m 的扫雷图 A, B，扫雷中格子上可能有雷也可能有数字&#…...
2024/4/15 3:35:47
给TCP进行“拍片”
上次谈到三次握手、四次挥手，相信有许多小伙伴还是不能理解，本讲就进行深入讲解。 1.为什么需要三次握手？ 我们进行三次握手主要是为了保证面向连接。 2.TCP的传输方式-------双全工 2.1.传输方式主要有三种---单工、半双工、全双工 2.2.单…...
2024/4/15 3:35:47
2021-2027中国电容触控传感器IC市场现状及未来发展趋势
2021-2027中国电容触控传感器IC市场现状及未来发展趋势本报告研究中国市场电容触控传感器IC的生产、消费及进出口情况，重点关注在中国市场扮演重要角色的全球及本土电容触控传感器IC生产商，呈现这些厂商在中国市场的电容触控传感器IC销量、收入、价格、…...
2024/4/15 3:36:38
最全蚂蚁4面成功拿到offer，面经分享，（附高频面试题合集）
因疫情影响从过完年就一直呆在家里，索性学点知识也方便以后跳槽涨薪，于是从二月份开始学习阿里P8架构师纯手打的一份Java面经手册，没想到5月初我成功从我们三线的一个小公司跳槽进了阿里，虽然等级不高，但是薪资在我原来…...
2024/4/19 9:53:51
车载SOC计算芯片典型架构
如下图是车载人工智能芯片的典型架构。按照承担的不同计算类型和任务进行分类，主要计算模块分为两类:CPU和 NPU。通常来说，CPU 做通用的逻辑计算，NPU 适合面向环境感知的 A1 计算。主要计算模块包括： (1)CPU 除进行与 AI 处理相…...
2024/4/18 12:43:08
盐城造价信息价期刊电子版扫描件PDF下载方法讲解
江苏盐城这里做造价的人并不多，最近接到了一个开发区代理预算的小厂房项目，特别找人咨询了一下盐城造价行业的套路，也顺便问清楚了盐城信息价是怎么弄的，一般《盐城工程造价》信息价期刊都是通过盐城住建局去订购的，每…...
2024/4/18 14:04:26
pig的 Replicated Join 失败
在使用pig的特殊join是报了类似下边的错误‘发现这是pig的bug地址为 https://issues.apache.org/jira/browse/PIG-3725 错误信息Join_6, MergeJoin_5, Join_8, Join_7, MergeJoin_2, MergeJoin_3, MergeJoin_8, MergeJoin_1, MultiQuery_14, MergeJoin_4, MergeJoin_9, Merge…...
2024/4/15 3:36:28
FYP autoencoder
自编码介绍仅仅是自编码器的话，其原理其实很简单。自编码器可以理解为一个试图去还原其原始输入的系统。自编码器模型如下图所示。从上图可以看出，自编码器模型主要由编码器（Encoder）和解码器（Decoder&#xff0…...
2024/4/15 3:36:33
生成16位激活码
/*** @Title随机生成16为大小写字母+数字* @return String * */ public String getCharAndNumr() { String val = ""; Random random = new Random(); for(int i = 0; i < 16; i++) { String charOrNum = random.nextInt(2) % 2 == 0 ?…...
2024/4/7 1:12:31
阻力支撑指标RSRS策略：光大证券研报复现
昨天我们已经计算好了RSRS指标策略，今天把光大证券的研报复现一下。由于计算比较耗时，我们会把计算的中间结果的dataframe保存下来。我们使用hdf5保留数据结果，这里有一个小tip，有点奇怪。我使用put的时候，使用的…...
2024/4/15 3:36:43
BES 平台app_trace在线调试的使用
简介在项目的前期开发中，最耗时间的当属调试工作，然而大多平台的调试都采用最传统的方法：查看日志-修改代码-编译-烧录-查看日志。但是这个过程是非常耗时，因为可能你只需要改一个值就需要完整的编译整个工程，当然小…...
2024/4/19 5:21:05
上传MacOS APP到AppStore
1、可以使用 application Loader或transporter上传， 2、iosAPP是上传.ipa文件，MacOS APP是上传pkg包如何打pkg包，可以参考： qt 开发的 macos app 上线 appstore_活到老、学到老-CSDN博客...
2024/4/15 3:36:13
数据挖掘入门笔记第六周
内容截图和资料均来自学堂在线聚类根据一定的相似性分成一组，与其他组具有不同的特征无监督学习没有标签，数据驱动应用领域 （市场，生物，地震，社交网络 ） 需要注意 1、处理不同类型的属性…...
2024/4/19 9:08:43