V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
frontman
V2EX  ›  程序员

用 javascript 怎样才能很好的获取手机的屏幕宽度和高度?

  •  1
     
  •   frontman · 2014-08-13 16:40:27 +08:00 · 5952 次点击
    这是一个创建于 3758 天前的主题,其中的信息可能已经有所发展或是发生改变。
    我用的$(window).width(), window.innerWidth, document.body.clientWidth; 都是试过了 但是都会出一些问题 都不准。
    24 条回复    2014-08-14 10:50:01 +08:00
    frontman
        1
    frontman  
    OP
       2014-08-13 16:49:14 +08:00
    怎么搞呢 像qq音乐分享到微信的那样的效果
    jsonline
        2
    jsonline  
       2014-08-13 17:04:56 +08:00 via Android
    什么问题?
    dingyaguang117
        3
    dingyaguang117  
       2014-08-13 17:10:05 +08:00
    同求
    honk
        4
    honk  
       2014-08-13 17:13:42 +08:00
    window.screen.width
    window.screen.height
    NemoAlex
        5
    NemoAlex  
       2014-08-13 17:15:03 +08:00
    无论是手机端还是 PC 端,浏览器的宽高使用
    document.documentElement.clientWidth
    document.documentElement.clientHeight
    都是兼容性很好的
    frontman
        6
    frontman  
    OP
       2014-08-13 18:03:25 +08:00
    @jsonline 获取手机宽度高度 然后把图片设置的跟屏幕一样宽 但经常出现错误
    frontman
        7
    frontman  
    OP
       2014-08-13 18:03:43 +08:00
    @honk 这个也是经常显示错误
    ant_sz
        8
    ant_sz  
       2014-08-13 18:13:28 +08:00
    为何不写 CSS 解决
    cute
        9
    cute  
       2014-08-13 18:20:30 +08:00   ❤️ 1
    css 100%
    frontman
        10
    frontman  
    OP
       2014-08-13 18:23:27 +08:00
    @ant_sz 因为要设置图片的宽度和屏幕宽度一样
    frontman
        11
    frontman  
    OP
       2014-08-13 18:24:09 +08:00
    @cute 这个可以 但是 要设置图片的宽高度 所以不知道怎么弄了
    frontman
        12
    frontman  
    OP
       2014-08-13 18:24:31 +08:00
    @NemoAlex 是不是不同的手机显示也不一样
    cute
        13
    cute  
       2014-08-13 18:31:25 +08:00
    @frontman 宽度为100%,高度为auto试试。
    kokdemo
        14
    kokdemo  
       2014-08-13 18:35:49 +08:00
    @ant_sz 宽度的话,图片很好解决,但是比如字体大小要随着变就不好解决了吧……
    learnshare
        15
    learnshare  
       2014-08-13 18:43:39 +08:00   ❤️ 1
    body>img

    html,
    body{
    height: 100%;
    overflow: hidden;
    }
    img{
    display: block;
    width: 100%;
    height: 100%;
    }

    这个是你要的效果么?

    不过我建议不要设置图片的高度,否则会拉伸图片,很难看的。
    frontman
        16
    frontman  
    OP
       2014-08-13 18:46:27 +08:00
    @learnshare 我试试看
    Biwood
        17
    Biwood  
       2014-08-13 19:06:05 +08:00
    用什么JavaScript啊,CSS的Media Queries不是专门解决这种问题的吗,with设置为100%,高度可以用padding-top:100%来解决
    Biwood
        18
    Biwood  
       2014-08-13 19:07:52 +08:00
    看错了,这里不需要用padding-top,高度设为auto就行
    seki
        19
    seki  
       2014-08-13 19:13:11 +08:00   ❤️ 1
    如果是单张图片全 viewport 的话,我试过
    jQuery.maxImage 1.1.8

    后来想了想,写 background-size 也差不多能达到这个效果
    ant_sz
        20
    ant_sz  
       2014-08-13 21:39:43 +08:00
    @kokdemo 用 media 选择器,或者使用 相对大小的 font-size 都可以啊。
    kokdemo
        21
    kokdemo  
       2014-08-13 22:39:33 +08:00
    @ant_sz ……感觉用media选择器不流畅啊……
    ximan
        22
    ximan  
       2014-08-13 22:47:33 +08:00   ❤️ 1
    http://jsbin.com/yonepocuvixa/1
    随手写了个,不知道是不是你要的效果。二维码:
    http://cli.clewm.net/qrcode/2014/08/13/2246004675.png
    frontman
        23
    frontman  
    OP
       2014-08-14 10:49:02 +08:00
    @seki 对 用background的显示效果最好
    frontman
        24
    frontman  
    OP
       2014-08-14 10:50:01 +08:00
    @ximan 恩恩 我看了 就是这样的效果 非常感谢
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   5664 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 26ms · UTC 06:03 · PVG 14:03 · LAX 22:03 · JFK 01:03
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.