【CSS】请教viewport的选择

这个问题我考虑了有一阵子了，在一个QQ群也打了场口水仗，所以抛出来看看有没有革命先驱帮忙解惑。

手机网页开发是一般的viewport会设置为：

<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1,user-scalable=0" />

通常这么做是为了做响应式调整，或者做自适应不同尺寸手机，然后通过rem或百分比来控制样式，再通过脚本去判断屏宽动态改变html元素的font-size；(手机淘宝这么干的)。

但是现在如果我只考虑手机，不考虑平板和PC平台，我不需要考虑自适应，放弃媒体查询一系列复杂设计，放弃响应式布局，我也可以采用640或750(Iphone6)定宽切图，通过viewport强制手机浏览器按640分辨率去渲染，viewport设置如下：（手机天猫首页采用了320的定宽）

<meta name="viewport" content="target-densitydpi=device-dpi,width=640,user-scalable=no" />

这样我切图的时候就认为手机是640的分辨率，然后让浏览器去缩放，我在魅族手机上测试兼容性，搜狗浏览器不支持，貌似浏览器会依然保持960的宽度，但是IOS上的搜狗浏览器支持，至于其他主流的如QQ， UC，chrome，猎豹，百度，包括微信的webview，都支持定宽viewport。

我的问题是为什么这种模式没成为主流？是因为历史原因么？老版本系统不支持？技术人员喜欢炫技术找存在感？（哈哈）还是别的神马？我现在如果开始开发新产品，采用这种模式是否可以呢？请不吝赐教~

（我贴个 测试地址，按640宽度切图的，不是广告，只是静态页，没有脚本，顺便请大家在手机上测试下兼容性试试）

微信可以扫描下面的二维码：图片描述

回答：

说说淘宝的首页

我先说说淘宝的首页，现在只有首页是用了rem做样式。

至于实现的方法，你可能说反了，他是先用js来计算宽度，然后动态改变html元素的font-size，以此来影响rem的大小，达到适配的效果。为了字体的效果达到最佳，目前是用的px单位，只有12px和24px。

我认为这是目前看到的最好的方法，也兼容了iPhone6和iPhone6+。淘宝也是上线没多久，据说马上会跟新到2.0版本。

说说viewpoint

这是你贴的代码。

<meta name="viewport" content="target-densitydpi=device-dpi,width=640,user-scalable=no" />

另外也有这样的写法。这是用js的方式。

var phoneScale = parseInt(window.screen.width)/640;
document.write('<meta name="viewport" content="width=640, initial-scale = '+phoneScale+', maximum-scale = '+phoneScale+', maximum-scale = '+phoneScale+', target-densitydpi=device-dpi">');
}

这两个会让浏览器去缩放。你也知道了，这是缩放。既然是缩放，那么就会失真，这是由于浏览器的自身渲染导致的。你发的网页，我用nexus4测了一下，虽然不是太过明显，但里面的灰色线条会有粗细不一致的问题，也就是说在某些分辨率也会产生几条1px的直线看起来不一样粗的情况。这个问题进一步的引申，就变成了你无法准确的在页面上画出规整的直线。

在一些手机上，如果用了一些下载的字体，甚至会发虚（字体的问题你可以找资料仔细看看）。而且一些情况下会有轻微的撕裂和发糊现象，如果你用了部分CSS3的属性，发糊的现象可能会更严重，就是是楼上的说法。还有一个问题就是渲染带来的卡顿，生产中iPhone表现出了部分页面滑动不自然。我认为这是各个浏览器的实现不一样带来的渲染兼容问题，不知事实上如何。

我对这种方案的评价是

够用，但不完美

什么是主流

这种放缩的方式是不是主流我不敢说，但这种简单粗暴高效的方式有相当的人在用。为什么呢？能用编辑器拖啊！里面的位置都是死的，全是绝对定位。设计稿怎么样，直接拖出来，不用动脑子。反正在微信H5页面里，相当的广告都是这样实现的。

再看看你的第一段代码。摆明了，照原生的来。在这样设定后，就会有很多的实现方法了。

<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1,user-scalable=0" />

另外说一下，淘宝对apple是做了二倍屏处理。所以是这样写的。

<meta name="viewport" content="initial-scale=0.5, maximum-scale=0.5, minimum-scale=0.5, user-scalable=no">

如果让我推荐，我会推荐淘宝的混合方案。因为我也是在实践当中，所以如果有什么的问题和意见可以留言。

回答：

定宽有个坑，就是如果你的页面要嵌入到App中时，App是以webview的形式渲染页面的。webview实际上也是webkit内核，而最新的webkit内核对定宽支持不是很好，他默认是以device-width来渲染的。这样一来你的页面就被放大了，窗口还有滚动条，解决办法是让app开发帮忙设置两个属性：
WebSettings webSettings = view.getSettings(); webSettings.setLayoutAlgorithm(LayoutAlgorithm.NARROW_COLUMNS);
webSettings.setUseWideViewPort(true);
可是App开发说这样影响性能。所以我觉得用device-width是最靠谱的。

回答：

对图文混排支持的不好

对css3的某些属性支持不好

回答：

我们是一家做web前端开发的公司，也是用的viewport定宽的方式 ，因为这样好布局，相对比100%宽度，定宽更好去做复杂的布局，并且在pc上依然很好看，仅供参考。

回答：

我想问一下，淘宝对apple是做了二倍屏处里，initial-scale=0.5，他和正常的initial-scale=1有什么区别，一般做移动端页面要想达到完美适配使用哪种比较好呢，但是这里面牵扯了一个设备像素比的问题devicePixelRatio，默认是1，就是设备的屏幕宽度和文档的宽度是一样的，如果为2就是设备屏幕宽度为文档宽度的两倍大小，这里面的换算是怎么算的？对这个换算有点晕，哪位大神可否讲一讲呢！！急求急求，给个开发移动端比较好的办法，我看淘宝的首页完全是动态算出来的

以上是 【CSS】请教viewport的选择 的全部内容， 来源链接： utcz.com/a/155241.html

回到顶部