一行代码让你的网站适配手机浏览器

2015 年 6 月 8 日
 lcj2class

最近突发奇想，做了个v2ex热帖收藏站。

由于不会css，用table布的局，但是在手机上很不方便，上网查了下，还真有一行代码适配手机的。分享一下：

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

更多可参考：

https://developer.mozilla.org/zh-CN/docs/Mobile/Viewport_meta_tag

7625 次点击
所在节点    程序员
27 条回复
Pastsong
2015 年 6 月 8 日
事实上这个标签是要配合响应式设计的css，如果只是普通的为PC设计的网站加了 maximum-scale=1 用户会恨死你的
iscraft
2015 年 6 月 8 日
v2ex没有这一行 为什么也可以做到?
JimmyCai
2015 年 6 月 8 日
@iscraft v2ex有专门的手机版
justfindu
2015 年 6 月 8 日
哦 只是不缩放而已 要放大看 = = 单独用并没有什么卵用啊
iscraft
2015 年 6 月 8 日
@JimmyCai 我是用chrome的toggle device mode工具看的 切换后 url并没有变化转向手机版 确实是响应式
Tr0y
2015 年 6 月 8 日
楼上，不一定，服务端可以通过user agent 来判断客户端，提供不同的视图，url变没变不代表服务端不可以提供两套视图。
lilydjwg
2015 年 6 月 8 日
我就特别讨厌不让用户放大。这个在微信里边特别明显，因为经常一些文章里是有图片的，但是那么小根本看不清。
learnshare
2015 年 6 月 8 日
这行代码只是禁止缩放了，单独存在的时候几乎没有价值，必须配合 media-query 等响应式技术才行。
yangqi
2015 年 6 月 8 日
@iscraft chrome切换后要刷新页面说明就不是响应式，是服务器端判断的。响应式是不需要刷新页面的
Perry
2015 年 6 月 8 日
HTML5 Boilerplate
lincanbin
2015 年 6 月 8 日
WTF

width=device-width：设置宽度为设备宽度
initial-scale=1：初始缩放比例为1
maximum-scale=1：限制最大缩放比例为1


这叫移动适配？不被用户打死就不错了。
GG668v26Fd55CP5W
2015 年 6 月 8 日
楼主仍需努力
undeflife
2015 年 6 月 8 日
惊呆了 我还以为楼主有什么黑科技...
Rice
2015 年 6 月 9 日
我没点进来就猜到是这句，蛤蛤
adjusted
2015 年 6 月 9 日
这一句的意思其实是告诉浏览器“这个页面我已经适配好各个size的屏幕了”，而不是这一句可以让网站适配各个屏幕。
xfspace
2015 年 6 月 9 日
还有一行，优先使用chrome内核的呢
loveuqian
2015 年 6 月 9 日
我这个菜鸟也知道这句话的意思
你可以去看看还有其他meta的作用
cuthead
2015 年 6 月 9 日
pre标签不适用
kdplus
2015 年 6 月 9 日
这贴太醒神了wwww
yangff
2015 年 6 月 9 日
就是因为这种傻*太多了，才显得强制使用缩放功能的重要性

这是一个专为移动设备优化的页面（即为了让你能够在 Google 搜索结果里秒开这个页面），如果你希望参与 V2EX 社区的讨论，你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://v2ex.ih06.com/t/196999

V2EX 是创意工作者们的社区，是一个分享自己正在做的有趣事物、交流想法，可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX