V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
爱意满满的作品展示区。
liuzhiyong
V2EX  ›  分享创造

“响应式设计”兼容 IE8 的例子

  •  
  •   liuzhiyong · 2017-01-03 20:18:26 +08:00 · 3206 次点击
    这是一个创建于 2887 天前的主题,其中的信息可能已经有所发展或是发生改变。
    没错, IE8 !在中国还有超过一成的人用 IE8 :
    http://tongji.baidu.com/data/browser

    只能用 JS 去实现了:
    代码: https://github.com/httpliuzhiyongme/homepagejs (所有“ IE8_”开始的函数是专门针对 IE8 滴)
    效果: http://liuzhiyong.me/ (可以调整窗口大小,看内容自动适应浏览器窗口——是的,支持 IE8 )

    得到的一些经验:
    1. 窗口宽度“ window.innerWidth ”不管用,要读取 clientWidth
    2. IE8 没有 devicePixelRatio ,可以认为等于 1 (用户的屏幕应该不是高清的)
    3. CSS 很多效果不管用,例如这个页面用到的“圆角 H2 ”。通过动态加载 PIE.js 然后实现“圆角”
    4. 动态加载 JS 文件时, onload 在 IE8 没用,得用 onreadystatechange 事件
    5. IE8 解析网页真的很慢, CSS 没有起效时,显示得一团糟。解决办法就是在 CSS 起效前隐藏文档(起效后显示)
    6. 同样的 font-size , IE8 显示的比 Chrome 小(至少 Win7 上是这样,我没有 WinXP ),要特别关照
    7. 这个不是 IE8 的: Firefox 和 Chrome 的缺省 line-height 不一样,对这个有要求的话,一定要设置 line-height
    13 条回复    2017-01-07 12:21:27 +08:00
    Kilerd
        1
    Kilerd  
       2017-01-03 20:23:55 +08:00 via iPhone
    除非公司的需求。要不然,对不起,那些人不是我的目标用户。😷😷😷
    murmur
        2
    murmur  
       2017-01-03 20:26:57 +08:00
    response.js 就可以让 ie8 支持媒体查询啊。。
    onionnews
        3
    onionnews  
       2017-01-03 20:28:33 +08:00 via Android
    确定这剩下的一成 ie8 用户是真人吗,机器刷流量的可能占一部分吧。
    ss098
        4
    ss098  
       2017-01-03 20:35:23 +08:00
    在你的例子里把窗口放小,就会出现横向滚动条。
    liuzhiyong
        5
    liuzhiyong  
    OP
       2017-01-04 10:25:26 +08:00
    @Kilerd 哈哈,我是没办法,个人网站打算给老家的长辈看,他们对电脑啥都不懂。
    liuzhiyong
        6
    liuzhiyong  
    OP
       2017-01-04 10:29:57 +08:00
    @murmur 是的,我这是“土法炼钢” :-)
    liuzhiyong
        7
    liuzhiyong  
    OP
       2017-01-04 10:32:41 +08:00
    @onionnews 我就认识几个用 IE8 的长辈,人家就是习惯了。
    liuzhiyong
        8
    liuzhiyong  
    OP
       2017-01-04 10:36:06 +08:00
    @ss098 不会吧,我测试了 Chrome/Firefox/IE8/三星手机 /小米手机 /OPPO 手机 /iPad 。请问你用的是什么浏览器呀?
    ss098
        9
    ss098  
       2017-01-04 15:24:19 +08:00


    你有几张图片指定了 width ,超出了父容器的宽度。

    可以这样解决:

    img {
    max-width: 100%;
    }
    liuzhiyong
        10
    liuzhiyong  
    OP
       2017-01-04 20:02:24 +08:00
    @ss098 啊,这个是故意搞的——当浏览器窗口的宽度大于 600 ,图片“全尺寸”:
    https://github.com/httpliuzhiyongme/homepagejs/blob/master/homepage.js 第 45 行做判断)
    “全尺寸”图片导致出现横向滚动条。

    背后有个想法:屏幕实在太窄(小于等于 600 像素),那么所有图片适应屏幕宽度;如果屏幕足够宽(大于 600 像素),还是全尺寸显示(会出现“横向滚动条”,同时图片会“完美展示”,这是个权衡利弊的问题)

    非常感谢你提供的“ max-width ”建议!
    jrotty
        11
    jrotty  
       2017-01-05 09:04:48 +08:00 via Android
    学校机房默认,我们这很多人都不知道 ie 和谷歌什么的什么区别,到机房打开电脑,看到个 ie 浏览器就打开,然后网页糊的不行,就抱怨网站不行,网速不行等等,后来推荐他们用了 360 浏览器,但是学校机房跟网吧一样开机后安装的软件全部还原
    liuzhiyong
        12
    liuzhiyong  
    OP
       2017-01-05 19:13:56 +08:00
    @jrotty 哈哈,完全理解。学校里面的系统一般都有点“古董”,因为能够满足基本需求,懒得升级。
    Arnie97
        13
    Arnie97  
       2017-01-07 12:21:27 +08:00 via Android
    老家长辈的电脑上默认浏览器不应该是搜狗或者 360 吗 XD
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2635 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 22ms · UTC 10:51 · PVG 18:51 · LAX 02:51 · JFK 05:51
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.