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

HTML悬赏题, 第一个解决者奖励100元, 说到做到!

  •  
  •   sdjl · 2012-07-06 11:27:31 +08:00 · 6260 次点击
    这是一个创建于 4522 天前的主题,其中的信息可能已经有所发展或是发生改变。
    大家看这个页面: jiepang1.sparker5.com

    这个页面是有问题的, 有些android机器打开页面后不能自适应全屏显示, 也就是说必须手动缩小才能看到全部内容, 特别是一些htc手机。 (小米是ok的)

    这个问题研究半天了, 找不到解决办法, 目前我们是写了3套css, 根据不同设备的尺寸运用不同的css, 但是不知道为什么, 达不到预想的效果。

    问问大家有没有这方面的经验, 我们的代码在github上, 你只需要解决web/html文件夹里面几个html页面的这个问题即可, 这是一个静态页面:

    https://github.com/sdjl/jiepang1

    请fork一个版本, 解决后告知您的代码地址, 如果能达到一个比较不错的效果, 不需要100%解决, 立马付款, 说到做到!
    21 条回复    1970-01-01 08:00:00 +08:00
    explon
        1
    explon  
       2012-07-06 11:38:01 +08:00
    给 viewport 加 initial-scale=1, maximum-scale=1 属性试试
    caizeng
        2
    caizeng  
       2012-07-06 11:41:06 +08:00
    就是一个css排版问题了
    sdjl
        3
    sdjl  
    OP
       2012-07-06 11:56:56 +08:00
    对了, 我的邮箱是 [email protected]


    @explon viewport只对iphone有效 已加
    catfan
        4
    catfan  
       2012-07-06 12:02:53 +08:00
    在<head></head>加上:<meta name="viewport" content="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=0" />
    bcxx
        5
    bcxx  
       2012-07-06 12:04:56 +08:00
    @sdjl webkit 都适用的……
    sdjl
        6
    sdjl  
    OP
       2012-07-06 12:11:17 +08:00
    @catfan
    @bcxx
    如果这样, 那么默认不支持全屏显示的手机就算手动也不能缩放了吧
    sdjl
        7
    sdjl  
    OP
       2012-07-06 12:15:00 +08:00
    @bcxx
    @catfan

    刚才尝试了, 不行。。。
    sdjl
        8
    sdjl  
    OP
       2012-07-06 12:19:25 +08:00
    @caizeng 为什么是css排版问题呢? 因为手动缩小是可以看到全屏的, 我想是浏览器不能自适应的问题吧?
    wenbinwu
        9
    wenbinwu  
       2012-07-06 12:21:41 +08:00
    Hinc
        10
    Hinc  
       2012-07-06 12:22:39 +08:00
    <meta name="HandheldFriendly" content="True">
    <meta name="MobileOptimized" content="320">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
    sdjl
        11
    sdjl  
    OP
       2012-07-06 12:26:44 +08:00
    @wenbinwu 这个我们写了, 你帮忙看一下这样写对不对?
    <link rel="stylesheet" media="screen and (min-width: 100px) and (max-width: 319px)" href="/css/style360.css" />
    <link rel="stylesheet" media="screen and (min-width: 320px) and (max-width: 320px)" href="/css/style640.css" />
    <link rel="stylesheet" media="screen and (min-width: 321px) and (max-width: 399px)" href="/css/style360.css" />
    <link rel="stylesheet" media="screen and (min-width: 400px) and (max-width: 550px)" href="/css/style480.css" />
    <link rel="stylesheet" media="screen and (min-width: 551px) and (max-width: 900px)" href="/css/style640.css" />
    sdjl
        12
    sdjl  
    OP
       2012-07-06 12:43:08 +08:00
    http://jiepang1.sparker5.com/p1.html
    我们重写了一个, 现在可以自适应了, 把代码全部改成图片了
    catfan
        13
    catfan  
       2012-07-06 13:04:31 +08:00
    宽度不要用定值
    cutehalo
        14
    cutehalo  
       2012-07-06 13:05:27 +08:00
    宽度用百分比来写
    alexrezit
        15
    alexrezit  
       2012-07-06 13:11:17 +08:00
    别写那么多CSS, 没用的, 等到需要兼容Windows Phone的时候你就傻眼了.
    alexrezit
        16
    alexrezit  
       2012-07-06 13:16:23 +08:00
    问题不在于viewport 问题在于640的那个css是真的按640去写的 要把它按320去写才行 不然肯定是放大了的 而且如果按640写的话就算最后折腾得兼容了等到你去兼容Windows Phone上的Mobile IE之后还得改回来
    alexrezit
        17
    alexrezit  
       2012-07-06 13:35:01 +08:00
    @sdjl
    你这个在Windows Phone上就果断悲剧了, 看我楼上说的.
    还有这个screen and (min-width: 320px) and (max-width: 320px)应该是可以写成screen and (width: 320px)的, 你试试看?
    tobeyouth
        18
    tobeyouth  
       2012-07-06 13:45:01 +08:00
    曾经貌似遇到过这么一个问题,于是把width=device-width给删掉就好了...
    另外,为什么不用HTML5的声明呢?
    freewizard
        19
    freewizard  
       2012-07-06 13:47:48 +08:00
    至今为止的android/blackberry发行版一般用target-densityDpi=device-dpi都能凑合

    不过这个玩意儿最近被webkit杀了,于是一帮人在webkit-dev里面吵
    sdjl
        20
    sdjl  
    OP
       2012-07-06 14:02:11 +08:00
    @alexrezit 谢谢提醒 :)
    sdjl
        21
    sdjl  
    OP
       2012-07-07 00:25:03 +08:00
    同志们, 我们用“一张图”这个必杀技了~~~
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   5299 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 32ms · UTC 06:54 · PVG 14:54 · LAX 22:54 · JFK 01:54
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.