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

最新推荐文章于 2025-06-20 01:07:27 发布

原创最新推荐文章于 2025-06-20 01:07:27 发布 · 897 阅读

1 ·

CC 4.0 BY-SA版权

本文介绍了一种使用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的样式即可；

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

叶才鑫

关注关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

大前端之移动端适配

w807139809的博客

09-20

1075

目前市面上移动端屏幕尺寸非常的繁多，很多时候我们希望一个元素在不同的屏幕上显示不同的大小以此来更好的还原效果图：当我们针对一个手机进行布局设计时，设置了一个 200 * 200 大小的盒子但在不同的设备上，由于逻辑像素不同的问题，会使得这个盒子在更大的视口上显得很小，在更小的视口上显示很大因此我们需要进行适配让它在不同设备上所占据视口的空间比例是相同的。

使用原生js实现的一个适配移动端的网页播放器（纯页面开发）

08-08

使用原生js实现的一个适配移动端的网页播放器（无后台），可以实现简单的音乐播放功能。适合新手学习~~~

参与评论您还未登录，请先登录后发表或查看评论

10-13

11-13

JavaScript：移动端适配之rem.js

最新发布

Dy大叔的日常

06-20

403

使用这里的rem.js后, 可以不用媒体查询。方便全局控制, 而且还可以解决iPhone下"1px边框的问题"。如果再结合postcss-pxtorem, sublime cssrem等插件的协助。就可以像pc上一样以px作为单位来书写, 非常方便。

html5页面移动端适配JS插件

11-30

html5页面移动端自适应插件； html5页面适配插件，移动端自适应； m-base.js

如何处理跨平台的自适应三

weixin_30900589的博客

10-27

124

相信大家在面试的过程中总会被问到如何处理自适应这样的相关问题，自适应其实就是根据视口的大小或者说用户平台的不同呈现出不同或相同的样式，有这么几种方案：使用flexbox弹性布局的方法固定一个某些宽度，使用一个模式，加上少许的媒体查询方案使用rem ---------------------------分------------割---------------------...

移动端适配 js适配

qq_45787678的博客

05-06

357

var sheJiGao = 750 function getSize(){ // 100是为了以后在看设计稿的时候，直接把设计稿尺寸除以100就可以当成真实的rem值 // 420 真实的屏幕尺寸 var screenWidth = document.documentElement.getBoundingClientRect().width document.documentElement.s.

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方法可以自动...

前端项目初始化

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...

rem.js 移动端 H5 解决各种机型适配问题的js

04-20

rem是 css3一种新的长度单位。它是相对于html标签的字体大小的单位（注意这里泛指是相对于html中的根元素标签也就是html）。一般用于在移动端H5页面中解决各种机型适配问题的js，文件中详细说明。

移动端的自适配/js控制

邓波的博客

10-14

2640

+function(){ adaptUILayout() function adaptUILayout(){ var deviceWidth, devicePixelRatio, targetDensitydpi, //meta, initialContent,

动态设置font-size

weixin_34245082的博客

06-13

728

针对以rem为单位的项目，计算html的font-size , // 计算html的font-size (function(){ function resizeBaseFontSize(){ var rootHtml = document.documentElement, deviceWidth = rootHtml.clientWidth; ...

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...

移动端页面适配：实现与策略

"移动端界面适配是针对不同尺寸和分辨率的手机屏幕，确保页面布局、字体大小、元素宽高等保持视觉一致性的一种技术。适配的主要目标是让页面在大屏和小屏设备上都能呈现出良好的视觉效果，尤其关注字体、间距、图片...