移动端页面通过js自动适配

最新推荐文章于 2025-06-20 01:07:27 发布
最新推荐文章于 2025-06-20 01:07:27 发布
阅读量897 收藏 1
点赞数 1
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_35746765/article/details/79193417
本文介绍了一种使用JavaScript动态调整viewport的方法，确保网页能在不同设备上以750px为基准进行适配。这种方法特别适用于移动设备，如iPhone6等。
var phoneWidth = parseInt(window.screen.width),
phoneScale = phoneWidth/750;
document.write('<meta name="viewport" content="width=750, initial-scale=1, minimum-scale = '+phoneScale+', maximum-scale = '+phoneScale+', target-densitydpi=device-dpi">');

这是一段以iPhone6 750px为标准的控制JS 只要写一套750px的样式即可；
叶才鑫
关注
大前端之移动端适配
w807139809的博客
09-20 1075
目前市面上移动端屏幕尺寸非常的繁多，很多时候我们希望一个元素在不同的屏幕上显示不同的大小以此来更好的还原效果图：当我们针对一个手机进行布局设计时，设置了一个 200 * 200 大小的盒子但在不同的设备上，由于逻辑像素不同的问题，会使得这个盒子在更大的视口上显得很小，在更小的视口上显示很大因此我们需要进行适配让它在不同设备上所占据视口的空间比例是相同的。
淘宝适配移动端js(rem)
11-13
淘宝适配移动端js(rem)
移动端适配rem.js
10-13
移动端适配rem.js
如何处理跨平台的自适应三
weixin_30900589的博客
10-27 124
相信大家在面试的过程中总会被问到如何处理自适应这样的相关问题，自适应其实就是根据视口的大小或者说用户平台的不同呈现出不同或相同的样式，有这么几种方案： 使用flexbox弹性布局的方法 固定一个某些宽度，使用一个模式，加上少许的媒体查询方案 使用rem ---------------------------分------------割---------------------...
JavaScript：移动端适配之rem.js
最新发布
Dy大叔的日常
06-20 403
使用这里的rem.js后, 可以不用媒体查询。方便全局控制, 而且还可以解决iPhone下"1px边框的问题"。如果再结合postcss-pxtorem, sublime cssrem等插件的协助。就可以像pc上一样以px作为单位来书写, 非常方便。
移动端适配 js适配
qq_45787678的博客
05-06 357
var sheJiGao = 750 function getSize(){ // 100是为了以后在看设计稿的时候，直接把设计稿尺寸除以100就可以当成真实的rem值 // 420 真实的屏幕尺寸 var screenWidth = document.documentElement.getBoundingClientRect().width document.documentElement.s.
前端项目初始化
qq_44291044的博客
01-06 467
/* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public domain) */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr...
移动端的自适配/js控制
邓波的博客
10-14 2640
+function(){ adaptUILayout() function adaptUILayout(){ var deviceWidth, devicePixelRatio, targetDensitydpi, //meta, initialContent,
JavaScript实现移动端页面按手机屏幕分辨率自动缩放的最强代码
01-21
关于移动端页面按手机屏幕分辨率自动缩放的js，先附上代码 [removed] var phoneWidth = parseInt(window.screen.width); var phoneHeight = parseInt(window.screen.height); var phoneScale = phoneWidth/750;/...
详解移动端h5页面根据屏幕适配的四种方案
11-21
这个方案的优点在于能够自动适配不同设备，简化布局计算，但可能会影响页面加载速度。 ### 方法二：使用`viewport`设置 `viewport`是HTML5中用于控制网页在移动设备上显示的关键元素。通过设置`viewport`的属性，...
js实现整体缩放页面适配移动端
10-15
3.js在移动端适配中的作用：通过JavaScript，可以动态地对页面进行缩放。在某些情况下，可能需要根据不同的设备特性和屏幕尺寸来调整页面布局，此时使用JavaScript进行控制会更加灵活。js中的fixScreen方法可以自动...
动态设置font-size
weixin_34245082的博客
06-13 728
针对以rem为单位的项目，计算html的font-size , // 计算html的font-size (function(){ function resizeBaseFontSize(){ var rootHtml = document.documentElement, deviceWidth = rootHtml.clientWidth; ...
html5页面移动端适配JS插件
11-30
html5页面移动端自适应插件； html5页面适配插件，移动端自适应； m-base.js
使用原生js实现的一个适配移动端的网页播放器（纯页面开发）
08-08
使用原生js实现的一个适配移动端的网页播放器（无后台），可以实现简单的音乐播放功能。适合新手学习~~~
rem.js 移动端 H5 解决各种机型适配问题的js
04-20
rem是 css3一种新的长度单位。它是相对于html标签的字体大小的单位（注意这里泛指是相对于html中的根元素标签也就是html）。 一般用于在移动端H5页面中解决各种机型适配问题的js，文件中详细说明。
js移动端布局适配方案全方位解析
梧桐落叶~~
12-14 895
移动端布局 这里是引用 设备像素比 一，物理像素（显示屏所占现的比例） 二，逻辑像素（css中设置的像素） dpr==物理像素/逻辑像素 如果设计图640px的情况下，我们要考虑的dpr是2 max-width：320px; html{font-size:12px} 如果设计图750px的情况下，我们要考虑的dpr是2 min-width:321px;max-width：375p...
移动端页面适配方案rem.js
badmoonc的博客
05-18 1313
var rem=(function(doc, win) { var docEl = doc.documentElement,//获取整个文档元素 resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',//兼容safari和其他浏...
移动端适配js
weixin_30553777的博客
01-03 130
移动端适配方案非常多，入行两年来始终没有一直使用一个标准，每个项目都按照业务需求来做适配 方案一： 最初听李彦辉老师的课程使用rem 布局了一段时间，但是字体计算比较麻烦，也不太精确 方案二： 偶然在Q群里一群友分享的 动态改变根节点字体的方案布局，头部引用一个js。按照设计图的像素写rem，100px = 1rem //控制字体 var calculate_size = fun...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值