用js判断设备的宽度，加载不同的css和js

最新推荐文章于 2023-06-15 09:38:22 发布
最新推荐文章于 2023-06-15 09:38:22 发布
阅读量3.2k 收藏 2
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sinat_24496253/article/details/53404285
版权
这段JavaScript代码用于检测设备屏幕宽度，如果大于720px，则加载login.css，否则加载register.css，并且在宽度小于720px时隐藏特定元素。同时，根据宽度条件加载不同的JavaScript文件base.js。
摘要由CSDN通过智能技术生成
<script type="text/javascript">
//获取屏幕宽度，检测是否大于720
var screen_width = document.documentElement.clientWidth > 1000 ? true : false ;
(function(){
   //获取head对象
   var head = document.getElementsByTagName('HEAD')[0];
   //创建link对象
   var style = document.createElement('link');
   var jstyle = document.createElement('script');
   //判断是否大于720，插入不同样式
   if(screen_width){
       style.href ='${ctxStatic}/index/css/
最低0.47元/天 解锁文章
sinat_24496253
关注
js判断屏幕大小，做对应处理（响应式）
weixin_33824363的博客
04-09 2682
<script type="text/javascript"> //定义变量获取屏幕视口宽度 var windowWidth = $(window).width(); if(windowWidth < 640){ // do something } if(windowWidth >= 640...
前端页面开发如何达到自适应不同设备宽高的效果
最新发布
别人笑我太疯癫，我笑他人看不穿。
06-24 1172
方法一，不使用固定的元素大小值，而是使用百分比，但是除非你开发的页面所需要的渲染相当直白，否则不推荐用。比如说在一个测试页面中只写一个div，它的宽和高设置为百分比，从效果中会发现，如果不做出其他的渲染配合，这个div的高度是塌陷的，也就是说，在页面上看不到这个div。不需要管不同的地方叫什么，只需要知道，这种适应不同设备展示效果可控的技术核心，是CSS提供的媒体能力，比如你可以写多个CSS样式，并在外链时检测浏览器可视宽度，只有符合宽高要求时才会生效。想要达到这样的效果，有两种方法。
JS判断网站宽度改变样式或触发事件教程
winkexin的博客
06-15 106
oWidth为获取的网站宽度，然后判断oWidth宽度数值是否小于某分辨率，如果成立就可以加载改变样式文件或触发事件等等，可以自由发挥了。
js代码实现自适应宽高
snow_living的博客
10-17 2093
(document.body).outerHeight(true)　//浏览器时下窗口文档body的总高度 包括border padding margin。$(document.body).outerWidth(true)　//浏览器时下窗口文档body的总宽度 包括border padding。$(document.body).height()　　　　　　//浏览器时下窗口文档body的高度。$(document.body).width()　　　　　　//浏览器时下窗口文档body的高度。
js判断当前设备及获取设备、浏览器的宽度和高度
weixin_43778043的博客
06-11 780
/** * 判断当前设备 * @returns */ function currDevice(){ var u = navigator.userAgent; var app = navigator.appVersion;// appVersion 可返回浏览器的平台和版本信息。该属性是一个只读的字符串。 var browserLang = (navigator.browserLanguage || navigator.language).toLowerCase(); //获取浏览器语言 v
关于JS判断图片是否加载完成且获取图片宽度的方法
10-27
在JavaScript中，判断图片是否加载完成以及获取图片的宽度是前端开发中常见的需求。这主要应用于处理用户上传图片时可能出现的布局问题，如图片加载不完全导致页面元素尺寸异常。以下将详细介绍两种常用的方法。 ##...
预加载css或javascript的js代码
12-09
预加载技术在网页优化中扮演着重要角色，它允许开发者在用户访问页面之前预先加载一些资源，如CSS和JavaScript文件，以减少页面加载时间并提高用户体验。本文将深入探讨两种常见的预加载方法：XMLHttpRequest（XHR）...
js判断图片加载完成后获取图片实际宽高的方法
10-22
这在响应式设计中尤为重要，因为不同设备的屏幕尺寸不同，需要根据图片的实际尺寸调整布局。在JavaScript中，传统的做法是通过DOM元素的`.offsetWidth`或`.offsetHeight`属性获取图片的宽度和高度。或者，在使用...
JS判断不同分辨率调用不同的CSS样式文件实现思路及测试代码
10-27
本篇将探讨如何使用JavaScript来判断不同的分辨率，并根据判断结果加载相应的CSS样式文件。这种方法可以确保在各种屏幕尺寸下，网页都能呈现出良好的视觉效果。 首先，我们来看一下提供的示例代码。在这个例子中，...
每日一学—设置页面文字大小随屏幕大小变化而变化(rem布局)
黛琳ghz的博客，期待你的关注。
04-03 2938
昨天刷题的时候遇到这个填空，初看代码，并不太懂这段代码的含义，通过调试和查阅资料，发现这段代码作用可大了，可以让网页适配移动端，设置页面文字大小随屏幕大小变化而变化。 代码如下 (function (doc, win) { var docEl = doc.documentElement, resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize', recalc = function () { //.
webform计算某几列结果_1+x 证书 Web 前端开发初级实操考试（试卷5 ）
weixin_39907316的博客
02-22 3570
本文编写于 439 天前，最后修改于 366 天前，其中某些信息可能已经过时。Web前端开发初级模拟测试卷(五)PDF版点击查看共55道题 总分：200分一、单选题共30题，60分1.在弹性盒子中，以下不属于justify-content的值是()DA flex-startB centerC space-betweenD end2.alt和title属性的特点表述正确的是()BA 不同的...
浏览器设置模拟器宽度为720px，但是实际上的和布局宽度为980px
weixin_40098371的博客
04-18 4026
今天在写html布局是，出现这样一种现象，如图所示：模拟器设置宽度为720px，背景图片宽度为720px,但是显示时在盒布局模型可以看出来，宽度变成了980px;最终解决方案：在html页面中添加：&lt;meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scal...
document.documentElement.clientWidth
weixin_30853329的博客
07-08 426
document.documentElement.clientWidth 摘自：http://blog.sina.com.cn/s/blog_6f1f9ead0100n1f6.html 关于获取各种浏览器可见窗口大小的一点点研究 <script> function getInfo() { var s = ""; s = " 网页可见区域宽：" document.body....
移动端 rem 适配的JS方法
GotYou_Ac的博客
06-09 379
// rem 适配的 js 代码 /* 找到最大寸 720px 当大于720px 宽度 html的 font-size 设置为100px 几乎兼容所有的大显示器 考虑问题 屏幕缩小时候，尺寸的问题，让 html 的font-size是一个动态的值，并且与视图窗口大小有关。 这样就是实现了 所有元素响应式 */ (function (window, document) { // 因为 ui 设计稿 标准的1倍图 以 375px 为标准 2倍
1+x综合案例1
ccyynmb的博客
11-19 7964
1.justify-content的值 flex-start space-between center 2.p下面除了span以外所有标签，旋转45度 p :not(span){transform:rotate(45deg)} 3.<div class="icon"></div>实现向右的红色三角形 .icon{width:0; height:0; overflow:hidden; border:5px solid transparent; border-left-co...
判断宽度的js
CDSN大帝的专栏
12-05 590
/*将获取的值存到变量里*/ width_screen=screen.width;   height_screen=screen.height;   availWidth_screen=screen.availWidth;   availHeight_screen=screen.availHeight;   colorDepth_screen=screen.colorDepth;  
html页面内容中的图片通过js设置图片宽度大于当前分辨率宽度的样式
weixin_43938408的博客
11-25 656
本帖针对图片宽度样式会大于当前分辨率的页面处理 处理方案：首先获取所有的图片，对其遍历，判断宽度大于当前分辨率宽度的，设置其宽度样式为100%，高度样式为auto; //js代码如下 $('.content').find('img').each(function() { var img = this; if(img.width > window.screen.width) { ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值