精华内容
下载资源
问答
  • let scrollTop = Math.max(document.documentElement.scrollTop, document.body.scrollTop); let curH = window.innerHeight + scrollTop; let docH = Math.max(document.documentElement.clientHeight, document.bo...
    let scrollTop = Math.max(document.documentElement.scrollTop, document.body.scrollTop);
    let curH = window.innerHeight + scrollTop;
    let docH = Math.max(document.documentElement.clientHeight, document.body.clientHeight);
    

    欢迎关注本人公众号:前端工程师发展之路

    展开全文
  • 移动端获取屏幕宽度

    2016-12-02 20:37:00
    jQuery获取获取屏幕高度、宽度:http://www.blogjava.net/hoojo/archive/2012/02/16/370132.html jq/js获取获取屏幕的各种高度、宽度 : http://www.haorooms.com/post/js_jquery_height 转载...

    移动端获取屏幕宽度:http://www.uw3c.com/jsviews/js18.html#

    jQuery获取获取屏幕高度、宽度:http://www.blogjava.net/hoojo/archive/2012/02/16/370132.html

    jq/js获取获取屏幕的各种高度、宽度 : http://www.haorooms.com/post/js_jquery_height

    转载于:https://www.cnblogs.com/hanxuming/p/6127278.html

    展开全文
  • 移动端屏幕适配

    2020-04-08 13:46:07
    移动端屏幕适配的作用是使页面在大小不一的移动端设配上都能正常的显示页面内容。 在编写移动端代码是需要在HTML页面head标签中添加以下代码 <head> <meta name="viewport" content="width=device-width, ...

    移动端适配

    移动端屏幕适配的作用是使页面在大小不一的移动端设配上都能正常的显示页面内容。
    在编写移动端代码是需要在HTML页面head标签中添加以下代码

    <head>
    	<meta name="viewport" content="width=device-width, 
    	initial-scale=1, maximum-scale=1, minimum-scale=1,
    	 user-scalable=no">
    </head>
    

    移动端适配原理

    相对单位rem,1rem等于根元素html的font-size。所以我们可以根据屏幕宽度的改变去改变根元素html的font-size。这样rem就会随着屏幕宽度的改变而改变。

    设置系数——方便将px转换为rem

    假如我们在屏幕宽度为750px的设计稿上,让1rem=750px(也就是设置html的font-size为750px)是可以的,但是会出现一些问题。
    我们需要设置和计算元素的相对高度,height=100px(在750px设计稿下量出的高度) / 750px rem。计算所得出的相对高度就是我们需要的高度。但是这里有一个问题height=100px/750px=0.133333333…rem,所得出的相对高度大多有无线小数(因为设计稿中其他元素的高度大多小于屏幕的宽度)而且结果很难计算。
    所以我们要解决这个问题需要一个系数来降低html的font-size的大小。如何设置一个系数使html的font-size变小,如下:
    1rem = 750px / 18.75(设置的系数,为了方便计算)= 40px。这样height = 100/40=2.5rem,这样相对高度就会非常好计算且很少有无线小数!
    在视口宽度(viewWidth)为750px时,html的font-size等于viewWidth/18.75=40px,这时那个元素的高度为100px/40px=2.5rem。当视口宽度(viewWidth)为375px时,html的font-size等于viewWidth/18.75=20px,这时那个元素的高度为2.5rem=2.5 * 20px = 50px。刚好是viewWidth为750px时的一半,这样就实现了文档中的元素随着视口宽度的改变而改变。

    获取屏幕宽度的方法

    获取浏览器窗口文档显示区域的宽度,不包括滚动条。

    document.documentElement.clientWidth
    

    将屏幕适配封装成模块

    (function(){
      'use strict'
      setRemUnit();
      function setRemUnit(){
        var ratio = 18.75;//保存系数
        var docEl = document.documentElement;
        var viewWidth = document.documentElement.clientWidth || window.innerWidth;//获取屏幕宽度
        docEl.style.fontSize = viewWidth/radio + 'px';//给html元素设置fontsize属性值
      }
      window.addEventListener('resize', setRemUnit);
    })();
    

    但是上面的代码并不是完美的移动端屏幕适配代码,因为它没有解决1px边框的问题。当设备像素比为2时设置1px,边框的实际厚度是2px。想要解决该问题的话需要对页面进行缩放。
    缩放公式:缩放比例为1/dpr。
    这样的话我们需要动态去设置页面的缩放比例

    (function(){
      //dpr => scale 需要通过dpr来修改屏幕的缩放值
      var docEl = document.documentElement,//获取html标签元素
        viewportEl = document.querySelector('meta[name="viewport"]'),//选择name等于viewport的meta元素,你也可能没有设置meta属性。
        dpr = window.devicePixelRatio || 1;//获取设备像素比dpr
    
      dpr = dpr >= 3 ? 3:(dpr>=2 ? 2 : dpr=1);//将设备像素比设置为整数,方便计算
      docEl.setAttribute('data-dpr', dpr);//给html元素添加data-dpr属性,值为dpr。方便根据html元素属性查看设备的dpr。
      var scale = 1/dpr,//计算缩放比例
        content = 'width=device-width,initial-scale='+ scale +',user-scalable=no,maximum-scale='+ scale +',minimum-scale='+ scale;//根据dpr修改缩放比例
    
      if (viewportEl) {//兼容你页面中有无name属性为viewpoint的meta标签
        viewportEl.setAttribute('content', content);
      }else{
        viewportEl = document.createElement('meta');
        viewportEl.setAttribute('name', 'viewport');
        viewportEl.setAttribute('content', content);
        document.head.appendChild(viewportEl);
      }
      setRemUnit();
      function setRemUnit(){
        var ratio = 18.75;
        var viewWidth = docEl.getBoundingClientRect().width || window.innerWidth;
        docEl.style.fontSize = viewWidth / ratio + 'px';
      }
    
      window.addEventListener('resize', setRemUnit);
    })();
    

    写的有点乱,有时间再来修改。

    展开全文
  • window.screenTop 网页正文部分左:window.screenLeft 屏幕分辨率的高:window.screen.height(手机端的显示高度,不包含虚拟按键区域和顶部时间区域) 屏幕分辨率的宽:window.screen.width 屏幕可用工作区高度:...

    网页可见区域宽:document.body.clientWidth(手机端包含上下菜单)
    网页可见区域高:document.body.clientHeight手机端包含上下菜单)
    网页可见区域宽:document.body.offsetWidth (包括边线的宽)(手机端包含上下菜单)
    网页可见区域高:document.body.offsetHeight (包括边线的宽)(手机端包含上下菜单)
    网页正文全文宽:document.body.scrollWidth
    网页正文全文高:document.body.scrollHeight
    网页被卷去的高:document.body.scrollTop
    网页被卷去的左:document.body.scrollLeft
    网页正文部分上:window.screenTop
    网页正文部分左:window.screenLeft
    屏幕分辨率的高:window.screen.height(手机端的显示高度,不包含虚拟按键区域和顶部时间区域)
    屏幕分辨率的宽:window.screen.width
    屏幕可用工作区高度:window.screen.availHeight(手机端的显示高度,不包含虚拟按键区域和顶部时间区域)
    屏幕可用工作区宽度:window.screen.availWidth

    如果出现宽高差异,请使用:

    $(window).height(),$(window).height()

    展开全文
  • 移动端屏幕适配方案

    2018-02-23 15:03:13
    移动端屏幕适配viewportpc上的网站在移动端上怎么办?如果把移动端的可视区域(320-768)的话,大部分网站都会因为太窄而显示错乱;所以浏览器默认把viewport设置为一个较宽的值 980px或1024px,至少保证PC网站在...
  •  屏幕可用工作区高度:window.screen.availHeight  屏幕可用工作区宽度:window.screen.availWidth 例: var w = window.innerWidth || document.documentElement.clientWidth //获取pc的宽,一般在pc上调试...
  • 移动端高度自适应

    千次阅读 2015-04-21 17:36:54
    移动端高度自适应
  • function a(){ console.log( "屏幕分辨率为:"+screen.width+"*"+screen.height +" "+ "屏幕可用大小:"+screen.availWidth+"*"+screen.availHeight +" "+ "网页可见区域宽:"+d
  • 移动端屏幕适配与响应式的区别移动端屏幕适配: 移动端 宽高% / rem 字体px 宽高都随着屏幕变化等比例变化响应式: PC+移动端 宽% 高、字体:px 宽度等比例变化,高度不变 简单适配方案:simple.js ...
  • 移动端获取全文高度

    2019-09-30 00:55:27
    移动端懒加载需要监听文档高度。以下是提供的所有方法 网页可见区域宽: document.body.clientWidth网页可见区域高: document.body.clientHeight网页可见区域宽: document.body.offsetWidth (包括边线的宽)网页...
  • pc上的网站在移动端上怎么办? 如果把移动端的可视区域(320-768)的话,大部分网站都会因为太窄而显示错乱; 所以浏览器默认把viewport设置为一个较宽的值 980px或1024px,至少保证PC网站在移动端上可以显示,...
  • 关于js获取屏幕高度和宽度( window.document.body,window.screen)(PC端和移动端)  在使用JS的时候经常遇到的问题就是我需要获取当前屏幕的宽度和高度。每每到这个时候不知道使用哪个; Js/Jquery获取网页屏幕...
  • 移动端屏幕宽度自适应原理及实现 问题:当前市场上手机屏幕宽度不尽相同,常见有320px(ipone5)、375px(ipone678)等等,而为了在不同宽度的手机屏幕上良好现显示网页,我们需要解决方案。 原理:当前前端解决手机...
  • 今天周日,我正坐在黄埔区图书馆,思索着关于移动端屏幕适配的问题。作为一名年纪轻轻的前端马蓉,不,是码农,移动端屏幕适配的方案的帖子没读过100篇吧,也读过几十篇了。可是今天我又在思考这个问题了,因为下周...
  • 首先需要说明的是php是服务器端的语言,是获取不到客户端的屏幕的宽度和高度的。但是有变通的方法就是通过...通过javascript获取客户端电脑的宽度,高度,分辨率的方法如下:屏幕分辨率的高: window.screen.he...
  • Bootstrap 移动端屏幕大小

    千次阅读 2017-04-18 14:02:50
    这样禁用缩放功能后,用户只能滚动屏幕,就能让你的网站看上去更像原生应用的感觉。注意,这种方式我们并不推荐所有网站使用,还是要看你自己的情况而定! Copy name="viewport" content="width=device-width, ...
  • 宝慕林4294392在移动端,可以使用flex布局给你个例子:nbsp;html>Document         * {          ...
  • 布局视口(layout viewport)可以看做事html元素的上一级容器即顶级容器,默认情况或者将html元素的width属性设为100%时,会沾满这个顶级容器,此时用:document.documentElement.clientWidth获取到html元素布局宽度...
  • 1.先谈一下几个概念 像素是度量的单位,可以理解为点 1.css像素 html中度量的单位 用px来计算,在pc中往往 1 css px = 1 物理像素 在不同设备中1css像素对应不同的设备像素(物理...iphone4 分辨率640x960但屏幕尺寸...
  • 首先需要说明的是php是服务器端的语言,是获取不到客户端的屏幕的宽度和高度的。但是有变通的方法就是通过...通过javascript获取客户端电脑的宽度,高度,分辨率的方法如下:屏幕分辨率的高: window.screen.he...
  • 在PC端,CSS的1px一般对应着电脑屏幕的1个物理像素,但在移动端,CSS的1px等于几个物理像素是和屏幕像素密度有关的。 1.Retina屏 所谓“Retina”是一种显示标准,是把更多的像素点压缩至一块屏幕里,
  • 移动端页面与PC的Web页面相比简单了不少,但让我们头痛的事情是要想尽办法让页面能适配众多不同的终端...在桌面浏览器中,viewport就是浏览器窗口的宽度高度。但在移动端设备上就有点复杂。 移动端的viewport太窄,为

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 7,645
精华内容 3,058
关键字:

获取移动端屏幕高度