JS判断是PC端还是手机端，引入不同的css

最新推荐文章于 2024-07-23 16:33:08 发布
最新推荐文章于 2024-07-23 16:33:08 发布
阅读量1.5k 收藏 1
点赞数 1
CC 4.0 BY-SA版权
分类专栏： JS
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_45395451/article/details/99407458
本文介绍了一种根据用户设备类型（手机或PC）动态加载不同CSS文件的方法，通过检测用户代理字符串实现响应式设计。代码示例展示了如何使用JavaScript来根据不同设备加载特定的样式表。

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

   var setStyle = function(cssArr){
        var i= 0,len = cssArr.length;
        for(i;i<len;i++){
            document.write('<link href="'+cssArr[i]+'" type="text/css" rel=stylesheet>');
        }
    };
    
     var is_mobi = navigator.userAgent.toLowerCase().match(/(ipod|ipad|iphone|android|coolpad|mmp|smartphone|midp|wap|xoom|symbian|j2me|blackberry|wince)/i) != null;
        if (is_mobi) {
            // window.location.href = "手机端";
              setStyle(['css/index.css']);
                     
        }else{
            // window.location.href = "PC端";
            setStyle(['css/pc.css']);
        }

记得点赞哦~

js判断是手机还是pc并调用不同css样式
07-18
if((navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|wOSBrowser|BrowserNG|WebOS)/i))) { [removed]('<link href="css/mobile.css" rel="stylesheet" type="text/css" media="screen" />'); }判断手机端访问调用的css
js如何判断用户是在PC端和还是移动端访问
10-26
在现代互联网开发中，如何判断用户的访问设备是PC端还是移动端已经成为了一个常见的需求。随着智能手机的普及，越来越多的用户通过移动设备访问网站，因此为移动端用户提供一个良好的浏览体验变得至关重要。对于开发...
JS判断设备是手机端还是PC端，并加载不同的css/js文件
weixin_41804506的博客
09-03 1723
有个页面需要做pc端和手机端的页面自适应，即手机打开是指定的样式，pc打开则是pc指定的样式，样式是前端ui已经设计好了的。 所以这里需要通过Navigator userAgent 属性判断浏览器的类型。 userAgent 属性是一个只读的字符串，声明了浏览器用于 HTTP 请求的用户代理头的值。 比如：edge浏览器 chrome浏览器： 所以只需要写一个函数 function isComputerOrPhone() { var sUserAgent = navigator.use...
JS判断是手机端还是PC端
cjw1231的博客
03-18 287
function browserRedirect() { var sUserAgent = navigator.userAgent.toLowerCase(); var bIsIpad = sUserAgent.match(/ipad/i) == "ipad"; var bIsIphoneOs...
如何使用js 判断在pc打开还是手机
最新发布
weixin_45776545的博客
07-23 1981
另外，随着Web技术的发展，现代浏览器和Web应用越来越多地采用响应式设计（Responsive Design）和渐进式增强（Progressive Enhancement）的策略，以适应不同设备的屏幕尺寸和性能。因此，在很多情况下，你可能不需要直接判断用户是在PC还是手机上访问，而是应该通过CSS媒体查询（Media Queries）等技术来适应不同的设备和屏幕尺寸。不过，由于设备和操作系统的多样性，这个列表可能并不完整。这样的库，这些库提供了更全面的设备检测功能，但需要注意的是，它们也是基于。
JS判断设备类型，应用不同css文件
weixin_41545048的博客
12-16 406
JS判断设备类型，应用不同css文件
基于VUE实现判断设备是PC还是移动端
10-15
在前端开发中，有时我们需要根据用户使用的设备类型来提供不同的界面体验，这通常涉及到判断设备是PC还是移动端。Vue.js，作为一个轻量级且强大的前端框架，提供了多种方式来实现这种设备判断。本文将详细介绍如何在...
数千套H5手机端、PC端HTML模板
05-19
本资源包含数千套适用于手机端和PC端的HTML模板，覆盖了...只需简单修改，就能快速打造符合需求的网站，无论是手机端还是PC端，都能轻松应对。记得在使用后给予好评，分享你的体验，这对提供资源的人是一种鼓励和支持。
pdfh5.js PC端与手机端h5页面pdf展示
03-17
总的来说，PDFH5.js是前端开发中一个实用的工具，它结合了JavaScript、HTML5 Canvas和PDF.js等技术，实现了在PC和手机端H5页面上流畅、响应式的PDF阅读体验。对于需要在Web应用中集成PDF展示功能的开发者来说，这是...
转盘抽奖JS原生代码，手机端PC端都支持，自行改造下即可
03-31
在这个场景中，我们讨论的是一段JavaScript原生代码，适用于手机端和PC端的转盘抽奖实现。通过简单的改造，你可以根据自己的需求定制转盘的奖项、样式以及逻辑。 首先，关于JS（JavaScript）本身，它是Web开发中的...
JS判断PC/移动端，引入不同样式
weixin_45555592的博客
11-25 510
const detectDeviceType = () => /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test( navigator.userAgent, ) ? 'Mobile' : 'Desktop'; detectDeviceType() if(detectDeviceType() === 'Mobile'){ // alert('移动'); ...
页面区分终端加载不同的CSS
饶艳辉
08-16 550
我们开发前端项目有时候需要根据不同的终端适配不同的样式。例如公司网站在PC端和移动端显示样式基本需要搞两套。 那么怎么尽量少改动前端代码的情况下满足此类需求呢？这里我说一下之前我在某公司的处理经验，如下： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http:/
如何用CSS判断手机、平板、PC终端？
阿酷tony
09-03 8407
<style> /*手机*/ @media screen and (max-width:600px){ .box_2 { padding-top: 45px; padding-bottom: 50px; /* background: #fff; */ /* 添加背景图片 */ b.
判断访问的是pc还是移动端展示对应的样式的方法
Lear的博客
09-06 2295
同一页面，根据访问的是pc端还是移动端来展示对应的样式。以下提供两种方法： 1.利用js判断设备类型，应用不同样式文件 $(function(){ var browser={ versions:function(){ var u = navigator.userAgent, app = navigator.appVersion; ...
区分pc端和手机端css
horizon_06的博客
04-09 3164
1.vue同个css文件 <div :class="isMobile ? 'backgroudImgMobile' : 'backgroudImgPc'"> data() { return { isMobile: false }; }, mounted() { this.getScreen(); }, methods:...
js判断移动端PC端登录引入不同的css与js
balidui8328的博客
06-14 793
function browserRedirect() { var sUserAgent = navigator.userAgent.toLowerCase(); var bIsIpad = sUserAgent.match(/ipad/i) == "ipad"; var bIsIphoneOs = sUserAgent.match...
判断是否是pc或移动端
qq_39871330的博客
05-25 934
&lt;script type="text/javascript"&gt; var sUserAgent = navigator.userAgent.toLowerCase();     var bIsIpad = sUserAgent.match(/ipad/i) == "ipad";     var bIsIphoneOs = sUserAgent.match(/iphone os/i) ...
js判断设备处于PC端还是移动端，然后加载不同的css、js
PromiseCao的博客
08-13 5586
//根据设备加载不同的样式 var setStyle = function(cssArr){ var i= 0,len = cssArr.length; for(i;i&lt;len;i++){ document.write('&lt;link href="'+cssArr[i]+'"...
根据判断pc端还是移动端引入相对应的css文件（vue3版）
宁
01-15 927
【代码】根据判断pc端还是移动端引入相对应的css文件（vue3版）
企业网站系统v5.18：PC+手机端全站静态生成与SEO优化
- **ASP（Active Server Pages）**：一种服务器端脚本环境，用于创建动态交互式网页和Web应用程序。ASP允许开发者使用VBScript或JavaScript等脚本语言来编写程序代码，这些代码在服务器上执行，从而生成HTML或其他...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值