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

This topic created in 5058 days ago, the information mentioned may be changed or developed.

大家看这个页面： jiepang1.sparker5.com

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

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

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

https://github.com/sdjl/jiepang1

请fork一个版本，解决后告知您的代码地址，如果能达到一个比较不错的效果，不需要100%解决，立马付款，说到做到！

页面

jiepang1

HTML

21 replies 1970-01-01 08:00:00 +08:00

explon

Jul 6, 2012

给 viewport 加 initial-scale=1, maximum-scale=1 属性试试

caizeng

Jul 6, 2012

就是一个css排版问题了

sdjl

Jul 6, 2012

对了，我的邮箱是 [email protected]

@explon viewport只对iphone有效已加

catfan

Jul 6, 2012

在<head></head>加上：<meta name="viewport" cOntent="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=0" />

bcxx

Jul 6, 2012

@sdjl webkit 都适用的……

sdjl

Jul 6, 2012

@catfan
@bcxx
如果这样，那么默认不支持全屏显示的手机就算手动也不能缩放了吧

sdjl

Jul 6, 2012

@bcxx
@catfan

刚才尝试了，不行。。。

sdjl

Jul 6, 2012

@caizeng 为什么是css排版问题呢？因为手动缩小是可以看到全屏的，我想是浏览器不能自适应的问题吧？

wenbinwu

Jul 6, 2012

css media http://css-tricks.com/css-media-queries/

Hinc

Jul 6, 2012

sdjl

Jul 6, 2012

@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

Jul 6, 2012

http://jiepang1.sparker5.com/p1.html
我们重写了一个，现在可以自适应了，把代码全部改成图片了

catfan

Jul 6, 2012

宽度不要用定值

cutehalo

Jul 6, 2012

宽度用百分比来写

alexrezit

Jul 6, 2012

别写那么多CSS, 没用的, 等到需要兼容Windows Phone的时候你就傻眼了.

alexrezit

Jul 6, 2012

问题不在于viewport 问题在于640的那个css是真的按640去写的要把它按320去写才行不然肯定是放大了的而且如果按640写的话就算最后折腾得兼容了等到你去兼容Windows Phone上的Mobile IE之后还得改回来

alexrezit

Jul 6, 2012

@sdjl
你这个在Windows Phone上就果断悲剧了, 看我楼上说的.
还有这个screen and (min-width: 320px) and (max-width: 320px)应该是可以写成screen and (width: 320px)的, 你试试看?

tobeyouth

Jul 6, 2012

曾经貌似遇到过这么一个问题，于是把width=device-width给删掉就好了...
另外，为什么不用HTML5的声明呢？

freewizard

Jul 6, 2012

至今为止的android/blackberry发行版一般用target-densityDpi=device-dpi都能凑合

不过这个玩意儿最近被webkit杀了，于是一帮人在webkit-dev里面吵

sdjl

Jul 6, 2012

@alexrezit 谢谢提醒：）

sdjl

Jul 7, 2012

同志们，我们用“一张图”这个必杀技了~~~

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

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