手机自适应js代码（h5手机自适应）[20240422更新]

本篇文章给大家谈谈手机自适应js代码，以及h5手机自适应对应的知识点，希望对各位有所帮助，不要忘了收藏本站喔。

本文目录一览：

• 1、怎样把CSS和javascript写的代码随着手机屏幕的大小变化而变化，变化排版不要乱！
• 2、Hbuilder制作的网页如何在手机上自适应屏幕大小 用js判断，还是用css 求详细解答
• 3、手机端如何用JS实现触屏
• 4、怎么修改网站的css让它适应手机端？
• 5、Js动态设置rem来实现移动端字体的自适应代码
• 6、前端怎么设置手机端页面高度自适应

怎样把CSS和javascript写的代码随着手机屏幕的大小变化而变化，变化排版不要乱！

亲，这个需要你知道rem与px的区别，如果要让手机自适应，用rem是最合适的。 看看这个写的css .重点是最底下那一大段自适应的写法。然后你只要宽度是rem就OK。自己仔细研究一下。 你把这个网站css2.css和phonecommon.js用上，自然就会了。

原则1：html { font-size: 62.5%; } 这个必须写

原则2：css底下一长串的自适应判断。只要造抄就行。

原则3：css中所有的图片和div等等所以元素必须用rem单位，不能出现px单位。否侧会出错

原则4：所有的图片宽度必须设定。高度自适应或者设定。这样才能随着手机图片自适应。

原则5：所以图片必须写在html中，不能写在css中做背景。原因很简单，css中没法设定图片的宽高，也就不能自适应。

原则6：设计稿宽度为640px宽度，切图保存。写css时 将px大小除20换算出来的就是你要写的rem的大小。

至于js部分，只能一样画葫芦，跟着照写就行，靠自己领悟。

再次强调：要了解rem的单位和px单位的区别。

Hbuilder制作的网页如何在手机上自适应屏幕大小 用js判断，还是用css 求详细解答

hbuilder只是开发工具！！！！

运行是容器的事情，比如tomcat

hbuilder是开发html、js、css比较好的ide

导入的css样式和js样式能识别，而且你可以格式化代码

手机端如何用JS实现触屏

//html5 新增 touch 事件

//禁用手机默认的触屏滚动行为

document.addEventListener('touchmove', function(event) {

event.preventDefault();

}, false);

//touchstart事件

function touchSatrtFunc(evt) {

try {

//evt.preventDefault(); //阻止触摸时浏览器的缩放、滚动条滚动等

var touch = evt.touches[0]; //获取第一个触点

var x = Number(touch.pageX); //页面触点X坐标

var y = Number(touch.pageY); //页面触点Y坐标

//记录触点初始位置

startX = x;

startY = y;

} catch (e) {

alert('touchSatrtFunc：' + e.message);

}

}

//touchmove事件，这个事件无法获取坐标

function touchMoveFunc(evt) {

try {

//evt.preventDefault(); //阻止触摸时浏览器的缩放、滚动条滚动等

var touch = evt.touches[0]; //获取第一个触点

var x = Number(touch.pageX); //页面触点X坐标

var y = Number(touch.pageY); //页面触点Y坐标

//document.getElementById("version").innerHTML = "原:"+startY+"   "+"现:"+y;

//判断滑动方向

if (y - startY  100) {

swipeDown();

} else if(y - startY  -100){

swipeUp();

}

} catch (e) {

alert('touchMoveFunc：' + e.message);

}

}

//touchend事件

function touchEndFunc(evt) {

try {

//evt.preventDefault(); //阻止触摸时浏览器的缩放、滚动条滚动等

} catch (e) {

alert('touchEndFunc：' + e.message);

}

}

//绑定事件

function bindEvent() {

document.addEventListener('touchstart', touchSatrtFunc, false);

document.addEventListener('touchmove', touchMoveFunc, false);

document.addEventListener('touchend', touchEndFunc, false);

}

//判断是否支持触摸事件

function isTouchDevice() {

//document.getElementById("version").innerHTML = navigator.appVersion;

try {

document.createEvent("TouchEvent");

//alert("支持TouchEvent事件！");

bindEvent(); //绑定事件

} catch (e) {

alert("不支持TouchEvent事件！" + e.message);

}

}

怎么修改网站的css让它适应手机端？

需要准备的材料分别有：电脑、浏览器、html编辑器。

1、首先，打开html编辑器，新建html文件，例如：index.html。

2、在index.html中的head标签中，输入meta代码：meta name="viewport" content="width=device-width, initial-scale=1"。

3、浏览器运行index.html页面，此时PC端的网页在移动端上也能自动适配。

Js动态设置rem来实现移动端字体的自适应代码

下面一段代码给大家介绍了Js动态设置rem来实现移动端字体的自适应，以此做个记录，方便以后需要，感兴趣的朋友一起看看吧。

具体代码如下所示：

//设置根元素字体

var

win

=

window,

doc

=

document;

function

setFontSize()

{

var

winWidth

=

$(window).width();

//750这个数字是根据你的设计图的实际大小来的，所以值具体根据设计图的大小

var

size

=

(winWidth

/

750)

*

100;

doc.documentElement.style.fontSize

=

(size

100

?

size

:

100)

+

'px';

};

//这里我们给个定时器来实现页面加载完毕再进行字体设置

setTimeout(function()

{

//初始化

setFontSize();

},

100);

以上所述是小编给大家介绍的Js动态设置rem来实现移动端字体的自适应代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！

前端怎么设置手机端页面高度自适应

　js代码

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 !function(win) { function resize() { var domWidth = domEle.getBoundingClientRect().width; if(domWidth / v 540){ domWidth = 540 * v; } win.rem = domWidth / 16; domEle.style.fontSize = win.rem + "px"; } var v, initial_scale, timeCode, dom = win.document, domEle = dom.documentElement, viewport = dom.querySelector('meta[name="viewport"]'), flexible = dom.querySelector('meta[name="flexible"]'); if (viewport) { //viewport：meta name="viewport"content="initial-scale=0.5, minimum-scale=0.5, maximum-scale=0.5,user-scalable=no,minimal-ui"/ var o = viewport.getAttribute("content").match(/initial-scale=(["']?)([d.]+)1?/); if(o){ initial_scale = parseFloat(o[2]); v = parseInt(1 / initial_scale); } } else { if (flexible) { var o = flexible.getAttribute("content").match(/initial-dpr=(["']?)([d.]+)1?/); if(o){ v = parseFloat(o[2]); initial_scale = parseFloat((1 / v).toFixed(2)) } } } if (!v !initial_scale) { var n = (win.navigator.appVersion.match(/android/gi), win.navigator.appVersion.match(/iphone/gi)); v = win.devicePixelRatio; v = n ? v = 3 ? 3 : v = 2 ? 2 : 1 : 1, initial_scale = 1 / v } //没有viewport标签的情况下 if (domEle.setAttribute("data-dpr", v), !viewport) { if (viewport = dom.createElement("meta"), viewport.setAttribute("name", "viewport"), viewport.setAttribute("content", "initial-scale=" + initial_scale + ", maximum-scale=" + initial_scale + ", minimum-scale=" + initial_scale + ", user-scalable=no"), domEle.firstElementChild) { domEle.firstElementChild.appendChild(viewport) } else { var m = dom.createElement("div"); m.appendChild(viewport), dom.write(m.innerHTML) } } win.dpr = v; win.addEventListener("resize", function() { clearTimeout(timeCode), timeCode = setTimeout(resize, 300) }, false); win.addEventListener("pageshow", function(b) { b.persisted (clearTimeout(timeCode), timeCode = setTimeout(resize, 300)) }, false); /* 个人觉得没必要完成后就把body的字体设置为12 "complete" === dom.readyState ? dom.body.style.fontSize = 12 * v + "px" : dom.addEventListener("DOMContentLoaded", function() { //dom.body.style.fontSize = 12 * v + "px" }, false); */ resize(); }(window);

关于手机自适应js代码和h5手机自适应的介绍到此就结束了，不知道你从中找到你需要的信息了吗 ？如果你还想了解更多这方面的信息，记得收藏关注本站。