蓝戒博客

  • 首页
  • 研发说
  • 架构论
  • 效能录
  • AI谈
  • 随笔集
智构苍穹
融合 AI、架构与工程实践,沉淀方法论,构建可持续的技术价值。
  1. 首页
  2. 研发说
  3. 正文

手机端rem适配方案

2016年9月12日 7109点热度 0人点赞 2条评论

方案一:
1.viewport设置:

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

2.html根元素font-size设置(注:设计稿640px):

var deviceWidth = document.documentElement.clientWidth;
if(deviceWidth > 640) deviceWidth = 640;
document.documentElement.style.fontSize = deviceWidth / 6.4 + ‘px‘;

方案二:

1.viewport初始设置:

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

2.动态设置viewport的scale

var scale = 1 / devicePixelRatio;
document.querySelector(‘meta[name="viewport"]‘).setAttribute(‘content‘,‘initial-scale=‘ + scale + ‘, maximum-scale=‘ + scale + ‘, minimum-scale=‘ + scale + ‘, user-scalable=no‘);

3.动态计算html的font-size

document.documentElement.style.fontSize = document.documentElement.clientWidth / 10 + ‘px‘;

标签: html5 web技术
最后更新:2025年9月13日

cywcd

我始终相信,技术不仅是解决问题的工具,更是推动思维进化和创造价值的方式。从研发到架构,追求极致效能;在随笔中沉淀思考,于 AI 中对话未来。

打赏 点赞
< 上一篇
下一篇 >

文章评论

  • 卢松松博客

    我对你博客的爱,你永远不会明白!

    2016年9月24日
    回复
  • 卢松松博客

    我对你博客的爱,你永远不会明白!

    2016年9月24日
    回复
  • razz evil exclaim smile redface biggrin eek confused idea lol mad twisted rolleyes wink cool arrow neutral cry mrgreen drooling persevering
    取消回复

    cywcd

    我始终相信,技术不仅是解决问题的工具,更是推动思维进化和创造价值的方式。从研发到架构,追求极致效能;在随笔中沉淀思考,于 AI 中对话未来。

    最新 热点 随机
    最新 热点 随机
    OpenAI 全量推送 GPT-6 与动态 UI:能点能调,输出还完全免费 打破 40 年 PC 规则,微软联手英伟达推出 GB300 与 RTX Spark:Windows 全面进入“常驻智能体时代” Google 开源 EmbeddingGemma 2:图文音视全打通,多模态 RAG 终于不用拼积木了 万亿开源巨兽炸场,Jira 与 Cloudflare 遭接管:软件工程正经历一场“智能体大重构” 别再靠 Prompt 劝大模型做个好人了!英伟达把安全做进芯片 彻底治好 Agent“记吃不记打”!Google 披露 WikiSkill 架构:让 9B 小模型反杀 27B 的长效知识编译术
    不讲废话的 AI 估值 2 亿美元!全面拆解“系统一”决策模型 Jev:70ms 极速响应与工业级实战Cursor 订阅用户的意外彩蛋:独立算力的 Grok Bot 体验指南白嫖 10 亿 Token 与云端虚拟机!Meta Muse 国内成功注册保姆级指南:手把手教你跳过排队狂揽 25 万 Star 封神!黑客松冠军打造的 ECC 到底有多强?把 Claude Code 彻底武装成“工业级正规军”开源神器 VoiceStudio 登顶热榜:本地零成本搞定 ElevenLabs 级声音克隆不用一钉一铆!用豆包大模型徒手撸出古建榫卯3D数字馆,长程 Coding 到底有多硬核?
    package.json配置字段全解析 Token 账单暴跌 60%!别再给 Agent 喂垃圾日志了,手把手打造高信噪比工具过滤层 别再当傻白甜了!狂砸2.5万亿的2026 AI狂欢,普通人和企业到底怎么苟住? 悄悄干掉 Pro!DeepSeek V4.1 Flash 全面接管 Bun:下一代 JavaScript 一体化工具链全面解析 一键生成百万播放短视频?被吹上天的RedditVideoMakerBot,到底是搞钱神器还是时间杀手?
    最近评论
    cywcd 发布于 3 周前(09月22日) 《牛来跑酷》游戏链接地址已更新: 1. Gemini 3.7 Flash 版 牛来跑酷: htt...
    渔夫 发布于 11 个月前(11月05日) 学到了,感谢博主分享
    沙拉小王子 发布于 9 年前(11月30日) 适合vue入门者学习,赞一个
    沙拉小王子 发布于 9 年前(11月30日) 适合vue入门者学习,赞一个
    cywcd 发布于 10 年前(04月27日) 请参考一下这篇文章http://www.jianshu.com/p/fa4460e75cd8

    COPYRIGHT © 2025 蓝戒博客_智构苍穹-专注于大前端领域技术生态. ALL RIGHTS RESERVED.

    京ICP备12026697号-2