在 PC 端，视口指的是浏览器的可视区域，其宽度和浏览器窗口的宽度保持一致。...在 CSS 标准文档中，视口也被称为初始包含块，它是所有 CSS 百分比宽度推算的根源，给 CSS 布局限制了一个最大宽度。...它和物理像素之间的比例取决于屏幕的特性（是否为高密度）以及用户进行的缩放，由浏览器自行换算。...视觉视口和缩放比例的关系为： 当前缩放值 = 理想视口宽度 / 视觉视口宽度 所以，当用户放大时，视觉视口将会变小，CSS 像素将跨越更多的物理像素。...Chrome 浏览器中也可以强制启用手动缩放 3.
通过设置视口，不管网页原始的分辨率尺寸有多大，都能将其缩小显示在手机浏览器上，这样保证网页在手机上看起来更像在桌面浏览器中的样子。 # 基础概念 像素是计算机屏幕中显示特定颜色的最小区域。...# CSS 像素（CSS pixels） 是 CSS 和 JS 中使用的一个抽象概念。它和物理像素之间的比例取决于屏幕的特性（是否为高密度）以及用户进行的缩放，由浏览器自行换算。...# 视觉视口(visual viewport) 视觉视口是指用户正在看到的网站的区域，这个区域的宽度等同于移动设备的浏览器窗口的宽度，用户可以通过缩放操作视觉视口，同时不会影响布局视口。 ?...缩放比例关系：当前缩放值 = 理想视口宽度 / 视觉视口宽度 用户放大时，视觉视口将会变小，CSS 像素将跨越更多的物理像素。...即使设置 user-scalable = no，也可以在 Android Chrome 浏览器中强制启用手动缩放 iOS的Safari浏览器，从10.0版本开始将不在支持user-scalable=no
诞生史 在 2007 年，苹果公司发布首款 iPhone 之前，由于当时的网站普遍为大屏幕设备所设计，为了应对 iPhone 这种小屏幕设备浏览桌面网站的问题，由此，苹果引入了多项变革，其中就包含了“双击缩放准确定位正文主体...，并将其缩放至适合的比例展现”的功能，即双击缩放功能。...因此，IOS Safari 浏览器首先引入了 300 毫秒延迟，用来判断用户是否会再次点击，也就是说，在第一次点击延迟 300 毫秒，300 毫秒后用户没有再次点击则认定为用户在进行普通的单击操作，并触发单击...这项技术的另一个关键在于，它仅消除了双击缩放的功能，用户依然可以使用双指缩放功能。因此，不存在与禁用缩放相关的可用性和可访问性问题。...; } 甚至可以添加 touch-action: none 到 body 以完全禁用双击来缩放（注意：这也将禁用双指缩放功能，因此它与我们前面讨论的与禁用缩放相关的可访问性和可用性问题相同）。
响应式设计的三大原则如下： 移动优先。这意味着在实现桌面布局之前先构建移动版的布局。 @media 规则。使用这个样式规则，可以为不同大小的视口定制样式。...如果一开始就设计一个包含全部交互的网站，然后再根据移动设备的限制来制约网站的功能，那么一般会以失败告终。 而移动优先的方式则会让你设计网站的时候就一直想着这些限制。...如果不加这个标签，移动浏览器会假定网页不是响应式的，并且会尝试模拟桌面浏览器，那之前的移动端设计就白做了。...首先，它告诉浏览器当解析 CSS 时将设备的宽度作为假定宽度，而不是一个全屏的桌面浏览器的宽度。其次当页面加载时，它使用 initial-scale 将缩放比设置为 100%。...当链接太小不好点击，或者用户想要把某个图片看得更清楚时，这个设置会阻止他们缩放页面。 # 媒体查询 媒体查询（media queries）允许某些样式只在页面满足特定条件时才生效。
通常我们都会称上述代码为CSS3的媒体查询功能。使用媒体查询功能能够解决针对桌面级的web设计在移动端不同尺寸下的兼容展现。 一、像素 研究视口之前，先说明一下像素。...例如：width:200px 的元素跨越了 200 个CSS像素。CSS像素相当于多少个设备像素取决于屏幕的特性（是否高密度）和用户进行的缩放。...在CSS标准文档中，它被称为初始包含块。这个初始包含块是所有CSS百分比宽度推算的根源。（在桌面上，视口的宽度和浏览器窗口的宽度一致）。...所以，移动端浏览器厂商必须保证即使在窄屏幕下我们的页面可以展示的很好，他们将视口的宽度设计得比屏幕宽度宽出很多。这样。在移动端，视口与移动端浏览器屏幕宽度就不再关联，而是完全独立的了。...它和设备的屏幕一样宽，并且它的CSS像素的数量会随着用户缩放而改变。 3、理想视口 布局视口的默认宽度并不是一个理想的宽度。显然用户希望在进入页面时可以不需要缩放就可以有一个理想的浏览和阅读尺寸。
早在 2007 年初，苹果公司在发布首款 iPhone 前夕，遇到一个问题：当时的网站都是为大屏幕设备所设计的。于是苹果的工程师们做了一些约定，应对 iPhone 这种小屏幕浏览桌面端站点的问题。...双击缩放，顾名思义，即用手指在屏幕上快速点击两次，iOS 自带的 Safari 浏览器会将网页缩放至原始比例。 那么这和 300 毫秒延迟有什么联系呢？ ?...由于用户可以进行双击缩放或者双击滚动的操作，当用户一次点击屏幕之后，浏览器并不能立刻判断用户是确实要打开这个链接，还是想要进行双击操作。...鉴于iPhone的成功，其他移动浏览器都复制了 iPhone Safari 浏览器的多数约定，包括双击缩放，几乎现在所有的移动端浏览器都有这个功能。...如何使用FastClick npm install fastclick -S 如何你是vue项目可以在main.js里面直接引入，当然这样是全局的，如果你需要某个页面用到，那就单个页面引入。
在巅峰时期，IE占据了全球桌面浏览器市场90%以上的份额，直到2013年前后谷歌浏览器逐渐成为主流。...通过此扩展程序，可以在浏览器标签页中把某个网页整体用IE内核渲染显示，据统计这是在Chrome程序商店中付费用户最多的扩展，可见需求还挺强烈。...彻底改造方案，就是将无法在Chrome等浏览器中兼容运行的程序模块，比如ActiveX控件实现的功能改用比如HTML5、WebGL、WebAssembly等新技术重写。...所以突破点就在于是否能在主流的Chrome、Firefox等浏览器之上实现一个通用的外接框架来支持这些原生程序的内嵌网页运行，并且可以自动响应浏览器的各种操作如窗口缩放、窗口移动、窗口关闭、网页滚动、标签页切换等...可以看出这个中间件的问世不仅仅是为解决老网站兼容运行的问题，而且是基于浏览器搭建了一个类似微信小程序那样的小程序生态系统，用于扩展浏览器的功能，让浏览器成为各种信息化系统集成的最佳容器，可彻底解决B/S
2、 viewport 在移动端用来承载网页的这个区域就是我们的视觉窗口viewport，这个区域可以设置高度宽度，可以按比例放大缩小，而且能设置是否允许用户自行缩放。 ?...width：设置的是viewport宽度，可以设置device-width特殊值。 initial-scale：初始缩放比，大于0的数字，一般设置为1.0。...maximum-scale：最大缩放比，大于0的数字。 minimum-scale：最小缩放比，大于0的数字。 user-scalable：用户是否可以缩放，yes或no（1或0）。 <!...三、响应式开发 1、什么是响应式开发 在移动互联日益成熟的时候，我们在桌面浏览器上开发的网页已经无法满足移动设备的阅读。 通常的做法是针对移动端单独做一套特定的版本。...Bootstrap中包含了丰富的Web组件，根据这些组件，可以快速的搭建一个漂亮、功能完备的网站。
在解析网页时，浏览器将使用这些规则检查页面的有效性并且采取相应的措施。DTD 是对 HTML 文档的声明，还会影响浏览器的渲染模式(工作模式)。三. meta viewport 是做什么的？怎么写?...，可以带小数minimum-scale允许用户的最小缩放值，为一个数字，可以带小数maximum-scale允许用户的最大缩放值，为一个数字，可以带小数height设置layout viewport 的高度...，这个属性并不重要，很少使用user-scalable是否允许用户进行缩放，值为”no”或”yes”, no 代表不允许，yes代表允许四....定义预定义范围内的度量定义导航链接定义输出的一些类型定义任何类型的任务的进度定义若浏览器不支持ruby元素显示的内容定义ruby...label 标签来定义表单控制间的关系，当用户选择该标签时，浏览器会自动将焦点转到和标签相关的表单控件上。
用户可以在虚拟机上重现服务器、桌面和平板电脑环境，无需重新启动即可跨不同操作系统同时运行应用。...构建面向 Windows 10 的应用、使用任何浏览器测试兼容性，或者在无需使用移动设备的情况下部署 Android-x86 以查看移动设备行为。 ?...您还可以将本地虚拟机上载到 vSphere 6.7，或将 vSphere 6.7 上运行的远程虚拟机下载到本地桌面。...Linux Workstation Pro 已支持此功能。 支持 Linux 主机 Wayland 现在，Workstation 15 Pro 可以在 Linux 主机 Wayland 桌面上运行。...已知问题 在主机上安装某个第三方软件后，虚拟机中的鼠标单击功能可能停止工作在主机上安装某个软件（例如 WizMouse）后，虚拟机中的鼠标单击功能可能停止工作。解决办法： 关闭虚拟机电源。
一般来讲，移动设备上的viewport都是要大于浏览器可视区域的，这是因为考虑到移动设备的分辨率相对于桌面电脑来说都比较小，所以为了能在移动设备上正常显示那些传统的为桌面浏览器设计的网站，移动设备上的浏览器都会把自己默认的...后来安卓以及各大浏览器厂商也都纷纷效仿，引入对meta viewport的支持 在meta viewport 中有6个属性，如下：width：控制 viewport 的大小，可以指定的一个值，如果 600...user-scalable：用户是否可以手动缩放。...可以理解 “width=device-width”的作用就是把viewport的宽度变成了设备的宽度，无论竖屏还是横屏都一样,回头看下为什么我们在手机上打开一个正常的pc端网站，在没有手动缩放的情况下，...因为在没有指定缩放值的情况下，移动设备会自动计算initial-scale的值保证 layout viewport 也就是页面宽度自动适配浏览器的可视宽度。
maximum-scale设置 maximum-scale [0.0-10.0] 定义放大最大比例，它必须大于或等于minimum-scale设置 user-scalable yes/no 定义是否允许用户手动缩放页面...，默认值yes 忽略数字自动识别为电话号码 在IOS Safari（其他浏览器和Android均不会）上会对那些看起来像是电话号码的数字处理为电话链接。...，但在具体的业务场景中，有些时候这是不必须的，所以你可以关闭电话自动识别，然后在需要拨号的地方，开启电话呼出和短信功能。...在苹果手机的Safari浏览器中访问一个页面，用户可以通过“添加到桌面”这一操作把网页保存到自己的主屏幕桌面上（就像安装一个APP，在主屏幕上就会有一个操作的图标），这样下一次可以直接点击图标打开页面...，如验证码的，需要强制浏览器显示图片，可以设置imagemode。
提及的安卓系统包括Android和基于Android开发的系统 提及的苹果系统包括iOS和iPadOS 本文针对的开发场景是移动端浏览器，因此大部分坑位的解决方案在桌面端浏览器里不一定有效 解决方案若未提及适用系统就默认在安卓系统和苹果系统上都适用...-- 多选文件 --> 忽略自动识别 有些移动端浏览器会自动将数字字母符号识别为电话/邮箱并将其渲染成上述「调用系统功能」里的。...「scheme」：应用标识，表示应用在系统里的唯一标识 「path」：应用行为，表示应用某个页面或功能 「query」：应用参数，表示应用页面或应用功能所需的条件参数 URL Scheme一般由前端与客户端共同协商...appId=60000002">打开支付宝的蚂蚁森林 禁止页面缩放 在智能手机的普及下，很多网站都具备桌面端和移动端两种浏览版本，因此无需双击缩放查看页面。...禁止页面缩放可保障移动端浏览器能无遗漏地展现页面所有布局。
平板设备如 ipad 以及传闻基于 webOs 的惠普产品将缩小桌面与手机的差距，但也无法改变最基本的问题。因为网站也需要在移动端显示，所以我们必须让它们在小屏幕上正常显示。...除了你是否应该这样做的问题之外，实际的问题是只有很少的网络公司会为移动单独设计网站。 手机浏览器的供应商希望为客户提供最好的用户体验，这意味着“尽可能如桌面显示的一样”。...在 BlackBerry 上，layout viewport 在 100% 缩放比例的情况下等于 visual viewport。这不会变。 缩放 很明显，两种视图都是用 CSS 像素测算。...缩放比例 你无法直接获得缩放比例，但是可以通过 screen.widt 和 window.innerWidth 的值求出来。当然只有两种属性都被支持时才有效。 幸运的是，缩放比例并不重要。... 元素 和在桌面上一样， document.documentElement.offsetWidth/Height 可以获得 元素在 CSS 像素中的尺寸。 ?
在此改进之前，如果不先尝试使用该功能，客户将无法知道 XAML Hot Reload 是否正在工作，这会引起混乱。...这带来了非常嘈杂的体验，并且根据客户的反馈，我们添加了一个名为“ Just My XAML”的新默认值，该默认值将树限制为仅在您的应用程序中编写的控件。...鉴于两者之间的差异，我们希望鼓励客户报告使用 Visual Studio 反馈功能可能遇到的任何问题或限制。 ?...以前的经验丰富的用户在 Visual Studio 会话中存储了每个文件的缩放级别和位置，这在客户经过一段时间后返回文件时引起混乱。...从此版本开始，我们将仅在活动会话的持续时间内存储缩放级别和位置，并在 Visual Studio 重新启动后恢复为“完全适合”默认值。
布局视口的宽度一般在768px~1024px（由浏览器厂商设置），常见宽度980px，这样，小屏的移动设备能够一次性完全显示桌面端页面，避免了浏览器出现横向滚动条。...但也产生了一个问题，移动端的浏览器同桌面端相比，就是字体过小，但是用户可以手动缩放。后期也产生了根据调整视口宽度（width）和缩放（scale）开发移动端的页面。...user-scalable为yes/no，或者1/0表示是否允许用户缩放。 initial-scale用于设置Web页面的初始缩放比例，设为1.0则将显示未经缩放的Web文档。...>1将放大， <1将缩小。 maximum-scale和minimum-scale用于设置用户对Web页面缩放比例的限制。值的范围为0.25至10.0之间。...可以通过JS来实现媒体查询的功能。
它们没有意义，除非你已经使用平移和缩放按钮访问了其他地方。 这类似于尝试在访问新页面之前单击 Web 浏览器上的返回 - 什么都不会发生。 首页总是你第一个浏览的页面，以及你的数据的默认视图。...单击工具栏按钮激活平移和缩放，然后将鼠标放在轴域的某个地方。 按住鼠标左键并将其拖动到新位置来平移图形。 当你释放它时，你按下的点处的数据将移动到你释放的点。...开始缩放时鼠标下的点会保持静止，你可以缩放图形中的其它任意点。 你可以使用快捷键'x'，'y'或CONTROL分别将缩放约束为x轴，y轴或保留宽高比。 使用极坐标绘图时，平移和缩放功能的行为不同。...可以使用鼠标左键拖动半径轴标签。 可以使用鼠标右键放大和缩小半径刻度。 Zoom-to-rectangle（缩放到矩形）按钮 单击此工具栏按钮以激活此模式。 将鼠标放在轴域的某处，然后按鼠标左键。...+ w 将平移/缩放限制于x轴 使用鼠标平移/缩放时按住x 将平移/缩放限制于y轴 使用鼠标平移/缩放时按住y 保留宽高比 使用鼠标平移/缩放时按住CONTROL 切换网格 鼠标在轴域上时按下g 切换
viewport的概念 viewport是一个限制html元素的功能， 可以理解为html元素的上一层元素。...听起来有点难以理解， 下面讲一个例子： 假设， 你给某个div元素设置了width：50%的样式后， 当你缩小放大浏览器的时候，你会发现div元素总是占据了50%的宽度，我们知道，宽度百分比是依赖它的包裹元素...，这是因为考虑到移动设备的分辨率相对于桌面电脑来说都比较小，所以为了能在移动设备上正常显示那些传统的为桌面浏览器设计的网站，移动设备上的浏览器都会把自己默认的viewport设为980px或1024px...，可以带小数 minimum-scale 允许用户的最小缩放值，为一个数字，可以带小数 maximum-scale 允许用户的最大缩放值，为一个数字，可以带小数 height 设置layout viewport...的高度，这个属性对我们并不重要，很少使用 user-scalable 是否允许用户进行缩放，值为"no"或"yes", no 代表不允许，yes代表允许 那么如果我们想设置ideal viewport
该设计使网页自动适应不同设备（电脑，手机或其他移动端）的屏幕大小，且呈现的内容符合用户的浏览习惯，从而减少用户在浏览时的缩放，平移和滚动等操作。 响应式网页设计样例>> ? 2....“逐步增强” 指：首先对低版本浏览器（如手机端）进行页面构建，保证最基本的功能，然后再针对高级浏览器（如电脑端）进行效果、交互等改进，追加功能等，以达到更好的用户体验。...“优雅降级” 指：一开始就针对高级浏览器，为产品构建完整的功能，然后再针对低版本浏览器进行兼容。 这两种策略实际是在设计时选取了不同的方向，一个是“由小到大”，另一个是“由大到小”。...当平台扩大至桌面或其他相对高级的终端时，设计者可以借助这些增强的优势，一步步有节奏地进行扩展和填充，得出一个能给人们带来更好的用户体验的高级版本。这可能是“逐步增强” 策略被广泛采纳的主要原因。...桌面端效果如下： 在主要功能的基础上进行了扩展；扩大了广告和活动促销的显示范围。 ? 这样一来，设计师能够很顺畅地在移动端的基础上添加更多内容，设计出一个既功能丰满又主次分明的桌面端产品。
从目前来看，短信功能还很不完善，至少还有很大的提升空间。（reizhi:界面不是一般的丑） 浏览器 相对于前一代的内置浏览器而言，WP7内置浏览器有了全新的表现。...至少看起来已经和桌面级的IE7/8有了可以相提并论的资格。在浏览器启动速度上和iPhone几乎不相上下；在页面滚动方面略微有一些卡顿但是已经足够快了；，而在页面缩放上，WP7表现得非常的平滑。...值得一提的是，WP7内置浏览器加入了IE7/8中的缩略图页面选择功能，可以通过点选缩略图来切换页面。但是缩略图数量被限制在了6个，这是基于性能的考虑。...而微软宣称在WP7将加强拍照方面的性能。尤其是摄像头启动速度和成像质量。在测试中，从启动相机到拍下照片，大约花了2秒。这相对前代而言，的确是快了不少。...总结 WP7是否成功，还是要看消费者是否认可。 附一：WP7不支持复制粘贴是因为根据微软的调查，大部分的用户不需要此功能。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频
