`
txf2004
  • 浏览: 6830910 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

使用 viewport meta 标签在手机浏览器上控制布局

 
阅读更多

在页面头里面添加如下meta信息

<meta name="viewport" content="width=device-width">
<meta name="viewport" content="target-densitydpi=device-dpi, width=480" />


http://fairyfish.net/m/viewport-meta-tag/



分享到:
评论

相关推荐

    html meta viewport属性说明

    移动版的 Safari 浏览器最新引进了 viewport 这个 meta tag,让网页开发者来控制 viewport 的大小和缩放,其他手机浏览器也基本支持。 Viewport 基础 一个常用的针对移动网页优化过的页面的 viewport meta 标签大致...

    利用css @viewport 做设备适配

    由于IOS、Android及类似平台在平板电脑和智能手机设备中的流行度和市场占有率,使得viewport meta标签被广泛使用。 viewport meta标签是用做布局的,这种活本应属于CSS的职能。这也是为什么W3C正在尝试规范一种新的...

    HTML meta viewport属性详细说明

    移动版的 Safari 浏览器最新引进了 viewport 这个 meta tag,让网页开发者来控制 viewport 的大小和缩放,其他手机浏览器也基本支持。 Viewport 基础 一个常用的针对移动网页优化过的页面的 viewport meta 标签...

    html网页中meta viewport属性说明

    移动版的 Safari 浏览器最新引进了 viewport 这个 meta tag,让网页开发者来控制 viewport 的大小和缩放,其他手机浏览器也基本支持。 Viewport 基础 一个常用的针对移动网页优化过的页面的 viewport meta 标签大致...

    移动端html5 meta标签的神奇功效

    对于桌面平台web布局中大家对meta标签再熟悉不过了,它永远位于 head 元素内部,对做SEO的朋友一定对meta有种特殊的感情吧,今天我们就来说说移动平台的meta标签,在移动平台meta标签究竟有哪些神奇的功效呢?...

    HTML5 移动页面自适应手机屏幕四类方法总结

    手机浏览器是把页面放在一个虚拟的窗口(viewport)中,通常这个虚拟的窗口(viewport)比屏幕宽,这样就不用把每个网页挤到很小的窗口中(这样会破坏没有针对手机浏览器优化的网页的布局),用户可以通过平移和缩放...

    自适应布局meta标签中viewport、content、width、initial-scale、minimum-scale、maximum-scale总结

    一、先明白几个概念 phys.width: device-width: 一般我们所指的宽度width即为phys.width,而device-width又称为css-width。...试想,浏览器如果把电脑端的980px的网页展现在宽度为750px的iphone6手机屏上,势必会放不下

    meta标签在移动平台开发中的应用详解

    对于桌面平台web布局中大家对meta标签再熟悉不过了,它永远位于 head 元素内部,对做SEO的朋友一定对meta有种特殊的感情吧,今天我们就来说说移动平台的meta标签,在移动平台meta标签究竟有哪些神奇的功效呢?...

    响应式 Web 设计 – Viewport

    手机浏览器是把页面放在一个虚拟的”窗口”(viewport)中,通常这个虚拟的”窗口”(viewport)比屏幕宽,这样就不用把每个网页挤到很小的窗口中(这样会破坏没有针对手机浏览器优化的网页的布局),用户可以通过平...

    工程硕士学位论文 基于Android+HTML5的移动Web项目高效开发探究

    Webkit 一个开源的浏览器引擎,在手机上的应用十分广泛 Webview WebView(网络视图)能加载显示网页,可以将其视为一个浏览器。它使用了WebKit渲染引擎加载显示网页 Activity Activity是一个应用程序组件,提供一个...

    request-desktop-site:利用“请求桌面站点”在移动浏览器上的工作原理,让它们脱离响应式视口

    这是一段简单的代码,它将在移动版 Chrome(Android 和 iOS)上启用“请求桌面站点”功能,以允许用户在响应式站点上查看桌面宽度的布局。 请注意,这与服务器端的“选择退出移动!”不同。 网站中内置的按钮:这是...

    简要总结CSS编程中的响应式设计

    现在,响应式Web设计无疑是非常流行的。对于新人,responsive design可能听起来有点复杂,但实际上,它比你想的要简单的多。为了帮助你快速入门...下面的viewport标签告诉浏览器使用设备宽度(device-width)做为viewp

    CSS实现两栏布局,左边固定,右边自适应的4种方法

    1. float+overflow:hidden 这种办法主要通过 overflow 触发 BFC,而 BFC 不会重叠浮动元素。由于设置 overflow:hidden 并...meta name="viewport" content="width=device-width, initial-scale=1.0"&gt; &lt;meta http-

    在Vue项目中,防止页面被缩放和放大示例

    在head标签中,我们会看到meta标签中有一条显示是 &lt;meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=0"&gt; 但是我们发现这条语句中只是让user-scalable=0,这是不让用户...

    移动端webApp之大前端

    移动端包括ipad、itocuch...不得不说的是viewport,这是移动端开发必备的一个meta标签属性。移动端设备分为屏幕设备大小以及浏览器视口大小,一般来说width表示浏览器视口大小,而device-width表示设备屏幕大小。比如ip

    BootStrap框架个人总结(bootstrap框架、导航条、下拉菜单、轮播广告carousel、栅格系统布局、标签页tabs、模态框、菜单定位)

    bootstrap框架、导航条、下拉菜单、轮播广告carousel、栅格系统布局、标签页tabs、模态框、菜单定位的个人总结,具体详情如下所示: bootstrap框架 &lt;!DOCTYPE html&gt; &lt;html lang="zh-cn"&gt;&lt;!-- 语言设置 ...

    lib-flexible:可伸缩布局方案

    灵活由于viewport单位得到众多浏览器的兼容, lib-flexible这个过渡方案已经可以放弃使用,不管是现在的版本还是以前的版本,都存有一定的问题。建议大家开始使用viewport来替代此方。用法安装npm i -S amfe-...

    多媒体广播

    让显示内容不被视口缩小从而让人看不清(视口以及视口的作用:在移动浏览器中,当页面上方超过设备时,浏览器内部虚拟的一个页面容器,将页面装到容器里,然后缩放到设备这么大,然以正常展示出页面上的所有内容后就...

Global site tag (gtag.js) - Google Analytics