h5 解决ios端弹出窗口中输入内容，失去焦点问题

移动端设备类型的判断与响应式处理

最新推荐文章于 2025-11-01 23:05:27 发布

原创最新推荐文章于 2025-11-01 23:05:27 发布 · 773 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#ios

vue 专栏收录该内容

13 篇文章

订阅专栏

本文介绍了一种在前端开发中判断用户设备类型（Android、iOS）的方法，并针对iOS设备进行了特定的响应式处理，如解决输入框聚焦导致的页面滚动问题。此外，还提供了检查是否在微信内置浏览器打开网页的代码片段。

部署运行你感兴趣的模型镜像

methods: {

device: function () { //判断手机类型
const u = navigator.userAgent; //用户代理，声明了浏览器用于 HTTP 请求的用户代理头的值 indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置。
const isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android终端
const isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
if (isAndroid)
return 'android';
if (isiOS)
return 'ios';
},

}，

mounted: function mounted() {
var that = this;
this.$nextTick(function () {
if (this.device() === 'ios') {
$("input").each(function () { //只能遍历jquery对象指的是dom对象及input
$(this).blur(function () { //当元素失去焦点时发生 blur 事件。
window.scroll(0, 0); //设置滚动条滚动到顶部
})
})
}

})

created: function created() {

var useragent = navigator.userAgent; //通过userAgent是否包含MicroMessenger来判断是否在微信内置浏览器打开网页
if (useragent.match(/MicroMessenger/i) != "MicroMessenger") {
return false;
}

您可能感兴趣的与本文相关的镜像

Stable-Diffusion-3.5

图片生成

Stable-Diffusion

Stable Diffusion 3.5 (SD 3.5) 是由 Stability AI 推出的新一代文本到图像生成模型，相比 3.0 版本，它提升了图像质量、运行速度和硬件效率