移动端根据屏幕宽度来等比调解高度的大小

最新推荐文章于 2025-07-19 16:00:08 发布

原创最新推荐文章于 2025-07-19 16:00:08 发布 · 1.3k 阅读

0 ·

CC 4.0 BY-SA版权

本文详细介绍了如何通过JavaScript实现当内容高度超出预设值时，自动出现下拉箭头的功能，以适应移动端屏幕宽度不固定的特点。通过获取元素宽度并计算高度范围，实现内容区域的动态调整。

项目需求：当内容高度超出某个值时，自动出现下拉箭头

这里写图片描述

原理：因为移动端的屏幕宽度不固定，所以应该以宽度作为标准，获取宽度的值，然后按照一定比例设置高度的范围

window.onload = function(){
  var detailWidth = document.getElementsByClassName('con')[0].offsetWidth;
  var detailHeight = document.getElementsByClassName('con')[0].offsetHeight;
  var maxHeight = detailWidth/40*30;   //设定 最大 范围
  if(detailHeight<maxHeight){
    $('.bottom').hide();
  }
};