V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
lcj2class
V2EX  ›  程序员

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

  •  
  •   lcj2class · 2015-06-08 19:08:07 +08:00 · 6585 次点击
    这是一个创建于 3462 天前的主题,其中的信息可能已经有所发展或是发生改变。

    最近突发奇想,做了个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

    27 条回复    2015-06-10 17:57:34 +08:00
    Pastsong
        1
    Pastsong  
       2015-06-08 20:00:29 +08:00
    事实上这个标签是要配合响应式设计的css,如果只是普通的为PC设计的网站加了 maximum-scale=1 用户会恨死你的
    iscraft
        2
    iscraft  
       2015-06-08 20:18:31 +08:00
    v2ex没有这一行 为什么也可以做到?
    JimmyCai
        3
    JimmyCai  
       2015-06-08 20:21:32 +08:00 via iPhone
    @iscraft v2ex有专门的手机版
    justfindu
        4
    justfindu  
       2015-06-08 20:47:45 +08:00
    哦 只是不缩放而已 要放大看 = = 单独用并没有什么卵用啊
    iscraft
        5
    iscraft  
       2015-06-08 21:13:31 +08:00
    @JimmyCai 我是用chrome的toggle device mode工具看的 切换后 url并没有变化转向手机版 确实是响应式
    Tr0y
        6
    Tr0y  
       2015-06-08 21:36:06 +08:00
    楼上,不一定,服务端可以通过user agent 来判断客户端,提供不同的视图,url变没变不代表服务端不可以提供两套视图。
    lilydjwg
        7
    lilydjwg  
       2015-06-08 21:37:34 +08:00
    我就特别讨厌不让用户放大。这个在微信里边特别明显,因为经常一些文章里是有图片的,但是那么小根本看不清。
    learnshare
        8
    learnshare  
       2015-06-08 21:44:18 +08:00
    这行代码只是禁止缩放了,单独存在的时候几乎没有价值,必须配合 media-query 等响应式技术才行。
    yangqi
        9
    yangqi  
       2015-06-08 21:46:16 +08:00
    @iscraft chrome切换后要刷新页面说明就不是响应式,是服务器端判断的。响应式是不需要刷新页面的
    Perry
        10
    Perry  
       2015-06-08 21:51:42 +08:00
    HTML5 Boilerplate
    lincanbin
        11
    lincanbin  
       2015-06-08 22:00:49 +08:00
    WTF

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


    这叫移动适配?不被用户打死就不错了。
    falcon05
        12
    falcon05  
       2015-06-08 23:03:39 +08:00 via iPhone
    楼主仍需努力
    undeflife
        13
    undeflife  
       2015-06-08 23:06:12 +08:00
    惊呆了 我还以为楼主有什么黑科技...
    Rice
        14
    Rice  
       2015-06-09 00:02:48 +08:00
    我没点进来就猜到是这句,蛤蛤
    adjusted
        15
    adjusted  
       2015-06-09 00:10:39 +08:00
    这一句的意思其实是告诉浏览器“这个页面我已经适配好各个size的屏幕了”,而不是这一句可以让网站适配各个屏幕。
    xfspace
        16
    xfspace  
       2015-06-09 00:16:58 +08:00
    还有一行,优先使用chrome内核的呢
    loveuqian
        17
    loveuqian  
       2015-06-09 00:21:41 +08:00 via iPhone
    我这个菜鸟也知道这句话的意思
    你可以去看看还有其他meta的作用
    cuthead
        18
    cuthead  
       2015-06-09 00:42:32 +08:00
    pre标签不适用
    kdplus
        19
    kdplus  
       2015-06-09 00:48:59 +08:00
    这贴太醒神了wwww
    yangff
        20
    yangff  
       2015-06-09 00:51:22 +08:00 via Android
    就是因为这种傻*太多了,才显得强制使用缩放功能的重要性
    Tink
        21
    Tink  
       2015-06-09 01:01:05 +08:00 via iPhone
    。。。。。
    iyangyuan
        22
    iyangyuan  
       2015-06-09 08:06:27 +08:00 via iPhone
    这个还差太多
    gongpeione
        23
    gongpeione  
       2015-06-09 08:59:23 +08:00
    2333333 真有一行代码适配就好了_(:з」∠)_
    lcj2class
        24
    lcj2class  
    OP
       2015-06-09 09:43:05 +08:00
    @yangff @Livid

    人事攻击,请处理。
    linxy
        25
    linxy  
       2015-06-09 11:03:32 +08:00
    @lcj2class 他还只是个刚刚高考完的高中生,请不要放过他!
    lalalanet
        26
    lalalanet  
       2015-06-10 13:15:57 +08:00
    @lcj2class 处理你妹啊。。 先处理处理自己的智商吧
    lcj2class
        27
    lcj2class  
    OP
       2015-06-10 17:57:34 +08:00
    @Livid

    请处理上面的评论。
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2739 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 21ms · UTC 15:04 · PVG 23:04 · LAX 07:04 · JFK 10:04
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.