最近突发奇想,做了个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
1
Pastsong 2015-06-08 20:00:29 +08:00
事实上这个标签是要配合响应式设计的css,如果只是普通的为PC设计的网站加了 maximum-scale=1 用户会恨死你的
|
2
iscraft 2015-06-08 20:18:31 +08:00
v2ex没有这一行 为什么也可以做到?
|
4
justfindu 2015-06-08 20:47:45 +08:00
哦 只是不缩放而已 要放大看 = = 单独用并没有什么卵用啊
|
5
iscraft 2015-06-08 21:13:31 +08:00
@JimmyCai 我是用chrome的toggle device mode工具看的 切换后 url并没有变化转向手机版 确实是响应式
|
6
Tr0y 2015-06-08 21:36:06 +08:00
楼上,不一定,服务端可以通过user agent 来判断客户端,提供不同的视图,url变没变不代表服务端不可以提供两套视图。
|
7
lilydjwg 2015-06-08 21:37:34 +08:00
我就特别讨厌不让用户放大。这个在微信里边特别明显,因为经常一些文章里是有图片的,但是那么小根本看不清。
|
8
learnshare 2015-06-08 21:44:18 +08:00
这行代码只是禁止缩放了,单独存在的时候几乎没有价值,必须配合 media-query 等响应式技术才行。
|
10
Perry 2015-06-08 21:51:42 +08:00
HTML5 Boilerplate
|
11
lincanbin 2015-06-08 22:00:49 +08:00
WTF
width=device-width:设置宽度为设备宽度 initial-scale=1:初始缩放比例为1 maximum-scale=1:限制最大缩放比例为1 这叫移动适配?不被用户打死就不错了。 |
12
falcon05 2015-06-08 23:03:39 +08:00 via iPhone
楼主仍需努力
|
13
undeflife 2015-06-08 23:06:12 +08:00
惊呆了 我还以为楼主有什么黑科技...
|
14
Rice 2015-06-09 00:02:48 +08:00
我没点进来就猜到是这句,蛤蛤
|
15
adjusted 2015-06-09 00:10:39 +08:00
这一句的意思其实是告诉浏览器“这个页面我已经适配好各个size的屏幕了”,而不是这一句可以让网站适配各个屏幕。
|
16
xfspace 2015-06-09 00:16:58 +08:00
还有一行,优先使用chrome内核的呢
|
17
loveuqian 2015-06-09 00:21:41 +08:00 via iPhone
我这个菜鸟也知道这句话的意思
你可以去看看还有其他meta的作用 |
18
cuthead 2015-06-09 00:42:32 +08:00
pre标签不适用
|
19
kdplus 2015-06-09 00:48:59 +08:00
这贴太醒神了wwww
|
20
yangff 2015-06-09 00:51:22 +08:00 via Android
就是因为这种傻*太多了,才显得强制使用缩放功能的重要性
|
21
Tink 2015-06-09 01:01:05 +08:00 via iPhone
。。。。。
|
22
iyangyuan 2015-06-09 08:06:27 +08:00 via iPhone
这个还差太多
|
23
gongpeione 2015-06-09 08:59:23 +08:00
2333333 真有一行代码适配就好了_(:з」∠)_
|