首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

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

    什么是Viewport 手机浏览器是把页面放在一个虚拟的“窗口”(viewport)中,通常这个虚拟的“窗口”(viewport)比屏幕宽,这样就不用把每个网页挤到很小的窗口中(这样会破坏没有针对手机浏览器优化的网页的布局...移动版的 Safari 浏览器最新引进了 viewport 这个 meta tag,让网页开发者来控制 viewport 的大小和缩放,其他手机浏览器也基本支持。...Viewport 基础 一个常用的针对移动网页优化过的页面的 viewport meta 标签大致如下: width:控制 viewport 的大小,可以指定的一个值,如果 600,或者特殊的值,如 device-width 为设备的宽度...user-scalable:用户是否可以手动缩放 Viewport 参考资料 Mozilla 开发者博客上有 viewport 使用教程。 ----

    31520

    JS控制流程

    与 break 语句的区别在于, continue 并不会终止循环的迭代,而是: 在 while 循环中,控制流跳转回条件判断; 在 for 循环中,控制流跳转到更新语句。...continue 语句可以包含一个可选的标号以控制程序跳转到指定循环的下一次迭代,而非当前循环。此时要求 continue 语句在对应的循环内部。...然后,它将从第一个 case 子句开始直到寻找到一个其表达式值与所输入的 expression 的值所相等的子句(使用 严格运算符,===)并将控制权转给该子句,执行相关语句。...也就是,你想让try语句中的内容成功, 如果没成功,你想控制接下来发生的事情,这时你可以在catch语句中实现。...如果在try块中有任何一个语句(或者从try块中调用的函数)抛出异常,控制立即转向catch子句。如果在try块中没有异常抛出,会跳过catch子句。

    7.3K10

    零碎之viewport

    viewport 在移动设备上进行网页的重构或开发,首先得搞明白的就是移动设备上的viewport了,只有明白了viewport的概念以及弄清楚了跟viewport有关的meta标签的使用,才能更好地让我们的网页适配或响应各种不同分辨率的移动设备...然而,layout viewport 的宽度是大于浏览器可视区域的宽度的,所以我们还需要一个viewport来代表 浏览器可视区域的大小,ppk把这个viewport叫做 visual viewport...现在我们已经有两个viewport了:layout viewport 和 visual viewport。...ppk把这个viewport叫做 ideal viewport,也就是第三个viewport——移动设备的理想viewport。...再总结一下:ppk把移动设备上的viewport分为layout viewport 、 visual viewport 和 ideal viewport 三类,其中的ideal viewport

    87640

    H5 viewport 语法

    -- html document --> <meta name="<em>viewport</em>" content=" height = [pixel_value | device-height...target-densitydpi = [dpi_value | device-dpi | high-dpi | medium-dpi | low-dpi]" /> width & height   控制...viewport 的大小,pixel_value表示可以指定的一个值或者特殊的值,而device-width/height为设备的宽度/高度(单位为缩放为100%时的CSS的像素)。...为了防止Android Browser和WebView根据不同屏幕的像素密度对页面进行缩放,可以将viewport的target-densitydpi设置为 device-dpi,页面将不会缩放。...在这种情形下,你还需要将viewport的width定义为与设备的width匹配,这样你的页面就可以和屏幕相适应。 initial-scale   初始缩放。这是一个浮点值,是页面大小的一个乘数。

    96520

    移动端适配viewport缩放方案

    采用viewport缩放的方案能又快又好的实现需求。 # 2、原理 在写HTML、CSS对设计稿进行还原时不关注屏幕尺寸的差异,而是直接按设计稿的标注来开发。...页面开发好后,在HTML的head标签里加入 <meta name="<em>viewport</em>" content="width={设计稿宽度}, initial-scale={屏幕逻辑像素宽度/设计稿宽度}"...之后需要通过JavaScript计算获取屏幕的宽度(假设需要适配逻辑像素宽度是428px的屏幕),在HTML的head里添加<meta name="<em>viewport</em>" content="width=750px...这段代码的意思是:设置布局视口(layout <em>viewport</em>)的宽度为750px(此时页面一般会超出屏幕),再缩放页面(initial-scale)使其恰好撑满屏幕。 # 3、适配代码 <!...缺点:页面整体放大缩小,对于不想缩放的元素无法<em>控制</em>。比如边框在大屏手机下显得很粗,在小屏手机下显得很细。

    1.4K20

    ExtJs八(ExtJs Mvc创建ViewPort续)

    要在Viewport内为各标签页添加activate事件,就不太符合MVC要求了。是的,这个在顶部实现退出按钮的时候已经违反要求了。因而都需要做出修改。...正题  为了实现标签页的MVC化,先在view目录下创建一个名称为MainPanel.js的文件,在文件里定义一个扩展于标签面板的控件,基本代码如下: Ext.define('ExtMVCOne.view.MainPanel...在initComponet方法内,将Viewport创建mainpanel实例的代码复制过来,并修改如下: me.items = [ { title: "文章管理...现在,在Controller目录创建一个名称为MainPanel.js的脚本文件,用来定义主面板的控制,基本定义代码如下: Ext.define('ExtMVCOne.controller.MainPanel...控制器定义好以后,切换会Viewport.js,先添加一个requires配置项,让其自动加载MainPanel,代码如下: requires: ['ExtMVCOne.view.MainPanel']

    4.1K10

    利用css @viewport 做设备适配

    在需要调整设备浏览器的viewport时,我们通常在HTML中使用来解决。但是令人意想不到的是,viewport meta标签并不具有“规范性”,即它不是W3C的正式标准,也非Web标准。...viewport meta标签是用做布局的,这种活本应属于CSS的职能。这也是为什么W3C正在尝试规范一种新的设备适配方法的原因,将HTML对viewport控制转交给CSS。...@viewport CSS 规则 使用@viewport规则控制viewport,与使用meta标签的效果相同,只是我们完全使用CSS来控制。...@viewport 与 Media Queries配合使用 我们可以在media query里面使用@viewport,已达到更加精准的优化。...@-ms-viewport { width: device-width; } @-o-viewport { width: device-width; } @viewport { width

    63210

    移动端viewport属性说明笔记

    说说移动端浏览器中的视口 视口(Viewport)是移动Web开发中一个非常重要的概念,最早是由苹果公司在推出iPhone手机时发明的,其目的是为了让iPhone的小屏幕尽可能完整显示整个网页。...# CSS 像素(CSS pixels) 是 CSS 和 JS 中使用的一个抽象概念。它和物理像素之间的比例取决于屏幕的特性(是否为高密度)以及用户进行的缩放,由浏览器自行换算。...# 布局视口(layout viewport) 指网页的宽度,一般移动端浏览器都默认设置了布局视口的宽度。...# 理想视口(ideal viewport) 布局视口的默认宽度并不是一个理想的宽度,于是 Apple 和其他浏览器厂商引入了理想视口的概念,它对设备而言是最理想的布局视口尺寸。...布局视口与理想视口的宽度一致: # 常用的针对移动网页优化过的页面的 viewport meta

    1.5K20
    领券