• 请不要在回答技术问题时复制粘贴 AI 生成的内容
lcj2class
V2EX  ›  程序员

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

  •  
  •   lcj2class · Jun 8, 2015 · 7255 views
    This topic created in 4017 days ago, the information mentioned may be changed or developed.

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

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


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

    人事攻击,请处理。
    linxy
        25
    linxy  
       Jun 9, 2015
    @lcj2class 他还只是个刚刚高考完的高中生,请不要放过他!
    lalalanet
        26
    lalalanet  
       Jun 10, 2015
    @lcj2class 处理你妹啊。。 先处理处理自己的智商吧
    lcj2class
        27
    lcj2class  
    OP
       Jun 10, 2015
    @Livid

    请处理上面的评论。
    About   ·   Help   ·   Advertise   ·   Blog   ·   API   ·   FAQ   ·   Solana   ·   3790 Online   Highest 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 74ms · UTC 10:25 · PVG 18:25 · LAX 03:25 · JFK 06:25
    ♥ Do have faith in what you're doing.