判断iOS和Android及PC端

本文介绍了如何使用navigator.userAgent判断浏览器类型,包括iOS、Android和PC端,并提供了代码示例。同时,文章还探讨了移动端网页的适配问题,通过meta标签设置实现不同浏览器的全屏、竖屏和webapp模式。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

在做移动端时,想起用navigator.userAgent来对浏览器类型进行判断,查了点资料,在这里总结下
还有一个就是移动端的缩放问题,在meta标签中进行设置,对部分浏览器进行强制性的限制

1.navigator的一些常用属性

  • navigator为window对象的一个属性,指向了一个包含浏览器相关信息的对象
navigator.appVersion 浏览器的版本号 
navigator.language 浏览器使用的语言 
navigator.userAgent 浏览器的userAgent信息
其中userAgent 属性是一个只读的字符串,声明了浏览器用于 HTTP 请求的用户代理头的值。

2.较常见的ios端、Android端及PC端的判断

  • 简单点的
/* 判断浏览器类型 */
let userAgent = navigator.userAgent;
/* 判断手机型号 */
let app = navigator.appVersion;
/* Android 终端 */
let isAndroid = userAgent.indexOf('Android');
/* ios终端 */
let isMac = !!userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
  • 封装性的
/* 判断各类型方法 */
const browser = {
   version: function() {
       const userAgent = navigator.userAgent;
       return {
           /* 判断是否是ios */
           ios: !!userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/),
           /* 判断是否是Android */
           android: userAgent.indexOf('Android') > -1 || userAgent.indexOf('Adr') > -1,

           /* 判断是否是移动端 */
           mobilePhone: !!userAgent.match(/AppleWebKit.*Mobile.*/),

           /* IE内核 */
           trident: userAgent.indexOf('Trident') > -1,
           /* opera内核 */
           presto: userAgent.indexOf('Presto') > -1,
           /* 苹果、谷歌内核 */
           webkit: userAgent.indexOf('AppleWebKit') > -1,
           /* 火狐内核 */
           gecko: userAgent.indexOf('Gecko') > -1 && userAgent.indexOf('KHTML') == -1,


           /* 判断是否是IPone手机或者QQHD浏览器 */
           iphone: userAgent.indexOf('iPhone') > -1,
           /* 判断是否是iPad */
           iPad: userAgent.indexOf('iPad') > -1,

           /* 判断是否是web应用程序(能够让用户完成某些特定任务的网站),没有头部和底部 */
           webApp: userAgent.indexOf('Safari'),
           /* 是否是微信 */
           weixin: userAgent.indexOf('MicroMessenger'),
           /* QQ */
           QQ: userAgent.match(/\sQQ/i) == ' qq',
      }
   }(),
   /* 判断浏览器使用的语言:navigator.language除IE浏览器外的浏览器使用的语言, 
    * navigator.browserLanguageIE浏览器使用的语言 
    */
   browserLanguage: (navigator.language || navigator.browserLanguage).toLowerCase()
};
if(browser.version.ios || browser.version.android || browser.version.mobilePhone) {
  console.log('是移动端');
}

3.meta标签设置

  • 如对浏览器进行强制全屏的设置(UC全屏),webapp模式等
<meta charset="UTF-8">
<!-- 视图窗口,移动端特属的标签 -->
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no">
<!-- 避免IE使用兼容模式 -->
<meta http-equiv="x-ua-compatible" content="IE=edge">
<!-- uc强制竖屏 -->
<meta name="screen-orientation" content="portrait">
<!-- QQ强制竖屏 -->
<meta name="x5-orientation" content="portrait">
<!-- UC强制全屏 -->
<meta name="full-screen" content="yes">
<!-- QQ强制全屏 -->
<meta name="x5-fullscreen" content="true">
<!-- UC应用模式 -->
<meta name="browsermode" content="application">
<!-- QQ应用模式 -->
<meta name="x5-page-mode" content="app">
<!-- 是否启动webapp功能,会删除默认的苹果工具栏和菜单栏 -->
<meta name="apple-mobile-web-app-capable" content="yes">
<!-- 这个主要是根据实际的页面设计的主体色为搭配来进行设置 -->
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<!-- 忽略页面中的数字识别为电话号码,email识别 -->
<meta name="format-decoration" content="telephone=no,email=no">
<!-- 启用360浏览器的极速模式(webkit) -->
<meta name="renderer" content="webkit">
<!-- 针对手持设备优化,主要是针对一些老的不识别viewport的浏览器,比如黑莓 -->
<meta name="HandheldFriendly" content="true">
<!-- 微软的老式浏览器 -->
<meta name="MobileOptimized" content="320">
<!-- windows phone 点击无高光 -->
<meta name="msapplication-tap-highlight" content="no">
正在努力学习中,若对你的学习有帮助,留下你的印记呗(点个赞咯^_^)
为了提供一个通用的函数来封装Base64下载图片的功能,并考虑到iOSAndroidPC的不同特性,我们可以使用JavaScript(假设是在一个跨平台的Web应用中),因为JavaScript是大多数现代浏览器都支持的语言。我们将创建一个名为`downloadImageFromBase64`的函数,它接受Base64字符串作为输入: ```javascript function downloadImageFromBase64(base64String, platform) { // 图片的MIME类型可以根据实际情况选择,这里是示例 const mimeType = 'image/jpeg'; let linkElement; switch (platform) { case 'ios': case 'android': // 对于移动,尝试创建隐藏的`<a>`元素并触发点击 const blob = atob(base64String.split(',')[1]); const url = `data:${mimeType};base64,${blob}`; linkElement = document.createElement('a'); linkElement.href = url; linkElement.style.display = 'none'; document.body.appendChild(linkElement); linkElement.click(); break; case 'pc': // PC通常需要用户手动复制链接并在新标签页打开 console.log(`Copy the following URL to download: ${url}`); break; default: throw new Error('Unsupported platform'); } // 移除临时的`<a>`元素(仅限移动) if (linkElement && platform === 'ios' || platform === 'android') { document.body.removeChild(linkElement); } } // 使用示例 downloadImageFromBase64(yourBase64String, 'android'); // 替换为实际的Base64字符串目标平台 ``` 请注意,这个函数只适用于浏览器环境,如果你需要原生的支持,可能需要借助特定平台的插件或者API。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值