Question

网页自适应手机浏览器问题

我设计了一个720*1280大小的网页，现在想放在手机上，让它刚刚好适合手机中浏览器大小。
我这里没有使用百分比适配，都是px设置。
<meta name="viewport"
content=" width = device-width, height = device-height, initial-scale=1,minimum-scale=0.5, maximum-scale=1.0, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
这个设置无效，因为我在写css样式时候的定位都是px。如何在使用px的情况下让网页自适应浏览器大小

Answer 1

　　<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
　　viewport做不到真的让你的页面自适应。
　　手机浏览器是把页面放在一个虚拟的“窗口”（viewport）中，通常这个虚拟的“窗口”（viewport）比屏幕宽，这样就不用把每个网页挤到很小的窗口中（这样会破坏没有针对手机浏览器优化的网页的布局），用户可以通过平移和缩放来看网页的不同部分。移动版的 Safari 浏览器最新引进了 viewport 这个 meta tag，让网页开发者来控制 viewport 的大小和缩放，其他手机浏览器也基本支持。
　　所以解决方式：
　　去了解了解“响应式布局”(响应式的布局的前提就是设置<meta name="viewport")，不同的手机、平板的尺寸不一样。所以能很好掌握响应式布局就能做好手机上的自适应。