• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >心得技巧 > 手机浏览器Viewport 参数(web前端设计)

手机浏览器Viewport 参数(web前端设计)

作者:佚名 字体:[增加 减小] 来源:互联网 时间:2017-08-06

本文主要包含手机浏览器,Viewport,参数,web前端等相关知识,佚名 希望在学习及工作中可以帮助到您
手机浏览器是把页面放在一个虚拟的“窗口”(viewport)中,通常这个虚拟的“窗口”(viewport)比屏幕宽,这样就不用把每个网页挤到很小的窗口中(这样会破坏没有针对手机浏览器优化的网页的布局),用户可以通过平移和缩放来看网页的不同部分。移动版的 Safari 浏览器最新引进了 viewport 这个 meta tag,让网页开发者来控制 viewport 的大小和缩放,其他手机浏览器也基本支持。
Viewport 基础

一个常用的针对移动网页优化过的页面的 viewport meta 标签大致如下:

<meta name=”viewport” content=”width=device-width, initial-scale=1, maximum-scale=1″>

width:控制 viewport 的大小,可以指定的一个值,如果 600,或者特殊的值,如 device-width 为设备的宽度(单位为缩放为 100% 时的 CSS 的像素)。
height:和 width 相对应,指定高度。
initial-scale:初始缩放比例,也即是当页面第一次 load 的时候缩放比例。
maximum-scale:允许用户缩放到的最大比例。
minimum-scale:允许用户缩放到的最小比例。
user-scalable:用户是否可以手动缩放  yes  or  no

您可能想查找下面的文章:

  • 手机浏览器不支持position: fix的解决方法
  • 手机浏览器Viewport 参数(web前端设计)

相关文章

  • 2018-08-23除了 Helvetica ,UI 设计师还应该知道哪些经典字体?
  • 2017-08-06禁用IE10的密码明文显示和快速清除功能的方法
  • 2018-08-23那些很熟悉但又叫不出名字的设计法则:诱饵效应
  • 2018-08-23如何用另一个角度做设计?来看Airbnb 这个创新方法!
  • 2018-08-23交互基础小课堂!如何利用 “峰终定律” 改善用户体验?
  • 2018-08-23UCAN2017回顾!当新技术来临时,设计会发生哪些变化?
  • 2018-08-23那些能力差的设计师,都喜欢说这10句话
  • 2017-08-06新手建站入门教程初期总结篇
  • 2017-08-06网页改版的7大要素分享 网页改版有哪7大要素
  • 2018-08-23网易可用性优化实录!如何让你的交互设计自查表真正用起来?

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • 10个优秀的 Web UI库/框架
    • 实现网页背景图片拉伸的两种方法
    • 收福利!6个不为人知但干货超多的设计类公众号
    • 用一个实战案例,帮你快速学会现在最火的设计冲刺法!
    • 为了拖尾款,甲方竟然要当我的男朋友…
    • 一个优秀的注册流程应该具有的步骤
    • 腾讯高级设计师:交互知识树系列之开发思维
    • 进阶高级设计师!帮你做能落地的界面设计之输入框
    • 25种提高网页加载速度的方法和技巧
    • 复制和粘帖是封装的大敌

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有