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

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

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

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


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

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

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