发新贴  快速回复

手机端布局适应问题

yutai
2015-06-11 12:01
 本帖最后由 yutai 于 2015-6-11 12:05 编辑 

http://www.cnblogs.com/2050/p/3877280.html  这篇博客中的设备宽度,几种viewport,很多问题不是很明白,找过很多篇博客,还是不理解
<meta name="viewport" content="width=320,minimum-scale=1.0, maximum-scale=10.0, user-scalable=no"/>和<meta name="viewport" content="target-densitydpi=device-dpi, width=device-width, initial-scale=1, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">区别,讲师能不能把这里的属性在各种手机下的具体值说清楚,适应尤其是文字,图片,还有至少页面出来的时候是在手机上市满屏的,px不能做到手机端适应吗?一个像素占有不同的设备像素。
 
莫涛
看下移动端那点事的前三集
2015-06-12 11:50  回复本帖
yutai
我看过了,这段视频里面对这些讲的很模糊,没有没一种布局模板,能适应80%以上的手机,同时讲讲怎么解决兼容机型,就是用width:100%,px,box三者结合解决布局
2015-06-12 21:30  回复本帖
 
创美易-miaov
forum.php?mod=redirect&goto=findpost&pid=40502&ptid=13724
我看过了,这段视频里面对这些讲的很模糊,没有没一种布局模板,能适应80%以上的手机,同时讲讲怎么解决兼 ...

移动端那点事和css3自适应是有说的,你多看看视频。另外,布局模板是没有的,页面设计是灵活万变的,关键是css3的一些技巧实用rem和百分比为单位。
还有,你可以多去做并且多测试(安卓手机和苹果上),多实践理解也比较快。
2015-06-13 01:37  回复本帖
yutai
我现在最大的疑问就在于viewport上,http://www.tuicool.com/articles/Fj2URb这篇博客讲的,什么设备宽度,手机分辨率,  layout viewport,  visual viewport, ideal viewport等之间的关系。还有就是iphone手机中,关于iphone3s,4s,5s,的ideal viewport是320,那iphone6,iphone6 plus也是的吗?下面这个布局在每个手机上都是满屏的呢? 《content="width=320 》 在iphone3s,4s,5s,是满屏,但是在iphone6,iphone6 plus应该不是的呀,所以我理解不了?
<meta name="viewport" content="width=320,minimum-scale=1.0, maximum-scale=10.0, user-scalable=no"/>
<style>
html,body{ height:100%; width:100%;}
#wrap{width:100%;}#header,#footer,#content{width:100%;}
</style>
<body>
 <div id="wrap">
    <div id="header" >
        <div class="header">
         </div>

    </div>
    <div id="content">
        <div class="content">



        </div>
    </div>
    <div id="footer"  >
     </div>
 </div>
</body>

2015-06-13 12:23  回复本帖
 
创美易-miaov
forum.php?mod=redirect&goto=findpost&pid=40513&ptid=13724
我现在最大的疑问就在于viewport上,http://www.tuicool.com/articles/Fj2URb这篇博客讲的,什么设备宽度, ...

<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
2015-06-13 13:14  回复本帖
yutai
<meta name="viewport" content="width=320,minimum-scale=1.0, maximum-scale=10.0, user-scalable=no"/>这样写也是全屏的
2015-06-13 14:14  回复本帖
ghostdp
forum.php?mod=redirect&goto=findpost&pid=40513&ptid=13724
我现在最大的疑问就在于viewport上,http://www.tuicool.com/articles/Fj2URb这篇博客讲的,什么设备宽度, ...

其实网上说的很多东西太专业化了,对于我们可能理解上会有误区

width=320 在  iphone6下不能满屏,是因为6下的设备分辨率(手机大小)375 * 568 ,自然 320 和 375这个差出了55像素啊

而 iphone3 4 5的设备分辨率的宽都是320  所以可以满屏的

2015-06-14 11:55  回复本帖
yutai
forum.php?mod=redirect&goto=findpost&pid=40526&ptid=13724
其实网上说的很多东西太专业化了,对于我们可能理解上会有误区

width=320 在  iphone6下不能满屏,是因 ...

我的意思就是这个在iphone手机上,不管是iphone6,iphone6 plus,上面都是满屏的,会自动缩放的,
之前看你们秒味关于viewport这一节的视频,中一句话说user-scalable=no, 和initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0, 是等价的,这个我有不同建议,觉得不对还望你们查看,或者说不完全对

2015-06-16 14:46  回复本帖
登录 后才可以发表回复