如何在Mobile Safari上禁用视口缩放？ - 腾讯云开发者社区 - 腾讯云

开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

meta设置（转）

移动端页面设置视口宽度等于设备宽度，并禁止缩放。...width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"> 移动端页面设置视口宽度等于定宽...（如640px），并禁止缩放，常用于微信浏览器页面。...Android平台中对邮箱地址的识别当网站添加到主屏幕快速启动方式，可隐藏地址栏，仅针对ios的safari...-- ios7.0版本以后，safari上已看不到效果 --> 将网站添加到主屏幕快速启动方式，仅针对ios的safari顶端状态条的样式 mobile-web-app-status-bar-style

7422 0

fastclick

import FastClick from ‘fastclick’ 并绑定到body FastClick.attach(document.body); 1、兼容性 iOS 3及更高版本的移动Safari...iOS 5及更高版本的Chrome Android上的Chrome（ICS） Opera Mobile 11.5及以上版本 Android 2以来的Android浏览器 PlayBook OS 1及以上版本...2、不应用FastClick的场景桌面浏览器; 如果视口元标签中设置了width=device-width，Android上的Chrome 32+会禁用300ms延时; 禁用300ms延迟。...IE10中，可以使用css属性-ms-touch-action: none禁止元素双击缩放发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/150769.html原文链接

4201 0

您找到你想要的搜索结果了吗？

是的

没有找到

移动端常用的meta总结

声明viewport视口 viewport对于移动端设备来说非常的重要，用于定义视口的各种行为。...user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"/> width 正整数或device-width 定义视口的宽度...，单位为像素 height 正整数或device-height 定义视口的高度，单位为像素 initial-scale [0.0-10.0] 定义初始缩放值 minimum-scale...，默认值yes 忽略数字自动识别为电话号码在IOS Safari（其他浏览器和Android均不会）上会对那些看起来像是电话号码的数字处理为电话链接。...name="nightmode" content="enable|disable"/> //->夜间模式强制图片显示：UC浏览器为了节省流量，为用户提供了无图模式，但是如果页面的图片是必不可少的，如验证码的

1.1K3 0

【适配】425- 彻底搞懂移动Web开发中的viewport与跨屏适配

如这张某宝的商品放大效果图，左半图为计算机看到的逻辑层画布，上方半透明选框为视口(viewport)，右半图为浏览器窗口，即用户看到的部分。逻辑关系简单清晰。...Q此处插入一个问题：浏览器中，对页面进行放大的时候，视口的大小如何变化？ 2.1 viewport 的缩放与平移回答上面的问题，视口会变小。...如图，PC Chrome 中试验，确实如之前解释，放大到 200%后，视口大小缩小了一倍。...为了解决上述固定 viewport 宽度的方案所引发的各种问题，Apple 在 iOS Safari 中首先引入了Viewport Meta Tag ，允许 Web 开发人员定制视口的大小和缩放比例，后续其他的移动浏览器厂商也都支持了此标记...在滚动到视图中之前，视口外部的内容在屏幕上不可见。 ●当前可见的视口部分称为可视视口。这可以小于布局视口，例如当用户进行缩放缩放时。该布局视口保持不变，但视觉视口变小。

3.1K3 0

彻底搞懂移动Web开发中的viewport与跨屏适配

如这张某宝的商品放大效果图，左半图为计算机看到的逻辑层画布，上方半透明选框为视口(viewport)，右半图为浏览器窗口，即用户看到的部分。逻辑关系简单清晰。...Q此处插入一个问题：浏览器中，对页面进行放大的时候，视口的大小如何变化？ 2.1 viewport 的缩放与平移回答上面的问题，视口会变小。...如图，PC Chrome 中试验，确实如之前解释，放大到 200%后，视口大小缩小了一倍。...为了解决上述固定 viewport 宽度的方案所引发的各种问题，Apple 在 iOS Safari 中首先引入了Viewport Meta Tag ，允许 Web 开发人员定制视口的大小和缩放比例，后续其他的移动浏览器厂商也都支持了此标记...在滚动到视图中之前，视口外部的内容在屏幕上不可见。 ●当前可见的视口部分称为可视视口。这可以小于布局视口，例如当用户进行缩放缩放时。该布局视口保持不变，但视觉视口变小。

3.4K2 0

移动端click事件300ms延迟

产生原因移动浏览器上支持的双击缩放操作，以及IOS Safari 上的双击滚动操作，是导致300ms的点击延迟主要原因。...解决方案禁用缩放对于不需要缩放的页面，通过设置meta标签禁用缩放，表明这个页面是不需要缩放的，双击缩放就没有意义了。此时浏览器可以禁用默认的双击缩放行为并且去掉300ms的点击延迟。...移动端浏览器默认视口宽度一般比设备浏览器视窗宽度大，通常是980px,我们可以通过如下标签设置视口宽度为设备宽度。...这个方案相比方案一的好处在于，它没有完全禁用缩放，而只是禁用了浏览器默认的双击缩放行为，但用户仍然可以通过双指缩放操作来缩放页面。不足在于其他浏览器的支持有限。...对比总结禁用缩放：简单，但同时也使的网页无法缩放，不适用于未对移动端浏览做适配优化的网页。更改默认视口宽度：简单，但需要浏览器支持。

2.8K2 1

移动端基础

视口可分为布局视口、视觉视口和理想视口 2.1布局视口 layout viewport 一般移动设备的浏览器都默认设置了一个布局视口，用于解决早期的PC端页面在手机上显示的问题 iOS，Android...基本都将这个视口分辨率设置为980px，所以pc上的网页大多都能在手机上呈现，只不过元素看上去很小，一般默认可以通过手动缩放网页。...可以通过缩放去操作视觉视口，但不会影响布局视口，布局视口仍保持原来的宽度 2.3理想视口 ideal viewport 为了使网站在移动端有最理想的浏览和阅读宽度而设定需手动添写meta视口标签通知浏览器操作...meta视口标签的主要目的：布局视口的宽度应与理想视口宽度一致。...4.1单独移动端页面（主流）通常情况下，网址域名前面加m（mobile）可以打开移动端。

1.7K1 0

移动web开发

视口(viewport)就是浏览器显示页面内容的屏幕区域.视口可以分成布局视口,视觉视口和理想视口,当然,我们只需要理想视口....IOS,Android基本都将这个视口的分辨率设置为980px,所以PC上的网页大都能在手机上呈现,只不过元素看上去很小,一般默认可以通过手动缩放页面....视觉视口 visual viewport 字面意思,他是用户正在看到的网站的区域.注意:是网站的区域我们可以通过缩放去操作视觉视口.但不会影响布局视口,布局视口仍保持原来的宽度....理想视口,对设备来讲,是最理想的视口尺寸需要手动添写meta视口标签通知浏览器操作 meta视口标签的主要目的:布局视口的宽度应该与理想视口的宽度一致,简单理解就是设备有多宽,我们布局视口就多宽 meta...contain: contain只要宽度或者高度一条边够到了就可以:图片中,宽度已经达到了所以不再继续放大. 04 移动端开发选择单独移动端页面(主流) 通常情况下,网站域名前面加m(mobile

2.3K2 1

移动端基础

视口可分为布局视口、视觉视口和理想视口 2.1布局视口 layout viewport 一般移动设备的浏览器都默认设置了一个布局视口，用于解决早期的PC端页面在手机上显示的问题 iOS，Android...基本都将这个视口分辨率设置为980px，所以pc上的网页大多都能在手机上呈现，只不过元素看上去很小，一般默认可以通过手动缩放网页。...可以通过缩放去操作视觉视口，但不会影响布局视口，布局视口仍保持原来的宽度 2.3理想视口 ideal viewport 为了使网站在移动端有最理想的浏览和阅读宽度而设定需手动添写meta视口标签通知浏览器操作...meta视口标签的主要目的：布局视口的宽度应与理想视口宽度一致。...之后根据大小测量坐标注意代码里面background-size也要设置为精灵图原来宽度的一半 4.移动端开发选择 4.1单独移动端页面（主流）通常情况下，网址域名前面加m（mobile

2K2 0

01_移动端布局基础

Safari，以及国产浏览器。...视口能将大分辨率尺寸网页缩小显示在手机浏览器上，这样保证网页在手机上看起来更像在桌面浏览器中的样子。布局视口布局视口是指网页的宽度，一般移动端浏览器都默认设置了布局视口的宽度。...默认值 contain，cover完全填充在实际开发中，通常会将视口设置为不允许用户缩放页面、视口宽度等于设备宽度、初始缩放比为1.0，最大缩放比为1.0。...在屏幕的大小相同的情况下，如果屏幕的分辨率低（如640×480），则屏幕上显示的像素少，单个像素点比较大，看起来会有种颗粒感。...在屏幕的大小相同的情况下，如果屏幕的分辨率高（如1920×1080），则屏幕上显示的像素多，单个像素点比较小，看起来会比较清晰。

981 0

前端工程师之移动端布局基础

Safari，以及国产浏览器。...视口能将大分辨率尺寸网页缩小显示在手机浏览器上，这样保证网页在手机上看起来更像在桌面浏览器中的样子。布局视口布局视口是指网页的宽度，一般移动端浏览器都默认设置了布局视口的宽度。...、视口宽度等于设备宽度、初始缩放比为1.0，最大缩放比为1.0。...在屏幕的大小相同的情况下，如果屏幕的分辨率低（如640×480），则屏幕上显示的像素少，单个像素点比较大，看起来会有种颗粒感。...在屏幕的大小相同的情况下，如果屏幕的分辨率高（如1920×1080），则屏幕上显示的像素多，单个像素点比较小，看起来会比较清晰。

751 0

图文并茂让你必须弄懂 viewport

视口viewport问题引出移动设备上的viewport就是设备的屏幕上能用来显示我们的网页的那一块区域，在具体一点，就是浏览器上(也可能是一个app中的webview)用来显示网页的那部分区域，但viewport...缩小初始缩放比为0.5 如果初始缩放比为1，那么布局的宽度就是和视口viewport的宽度是一样的...（IOS的safari中，即使你写的 user-scalable=no，用户照样可以缩放）同样的，为了保证兼容性，把三者都写上最后视口最标准的写法如下缩放就看得到区别，验证是CSS像素没做视口viewport适配的显示效果做了视口适配的效果(比如百度) 兼容性的方案： var viewWidth = document.documentElement.clientWidth...|| window.innerWidth; 即可获取视口宽度，如果做了视口适配，这个打印出来就是和屏幕宽度一样的值，比如这里的375个CSS像素，如果不做视口适配，这个打印出来就是默认视口宽度(和机型相关

6081 0

前端成神之路-移动web开发_流式布局

视口可以分为布局视口、视觉视口和理想视口 2.1 布局视口 layout viewport 一般移动设备的浏览器都默认设置了一个布局视口，用于解决早期的PC端页面在手机上显示的问题。...iOS, Android基本都将这个视口分辨率设置为 980px，所以PC上的网页大多都能在手机上呈现，只不过元素看上去很小，一般默认可以通过手动缩放网页。 ?...####2.2视觉视口 visual viewport 字面意思，它是用户正在看到的网站的区域。注意：是网站的区域。我们可以通过缩放去操作视觉视口，但不会影响布局视口，布局视口仍保持原来的宽度。...：布局视口的宽度应该与理想视口的宽度一致，简单理解就是设备有多宽，我们布局的视口就多宽总结：我们开发最终会用理想视口，而理想视口就是将布局视口的宽度修改为视觉视口 2.4meta标签 ?...最标准的viewport设置视口宽度和设备保持一致视口的默认缩放比例1.0 不允许用户自行缩放最大允许的缩放比例1.0 最小允许的缩放比例1.0 3.0二倍图 ####3.1物理像素&物理像素比

1.6K2 1

响应式Web设计技巧以及入门技巧

还有一些其他叫法，如流式设计、弹性布局、塑料布局、流体设计、自适应布局、跨设备设计以及弹性设计。...这两种浏览器以及很多其他浏览器如chrome、opera，都支持用viewport meta元素覆盖默认的画布缩放设置，只需要在html的标签中插入一个标签。标签中可以设置具体的宽度或者缩放比例。...缩放是一个重要的辅助功能，所以实践中很少禁用。...粘贴下面的代码到和标签之间: 设置比例为1.0这表示浏览器将按照其视口的实际大小来渲染页面...针对不同视口宽度修正设计设置viewport meta 标签后，现在我们针对不同视口修正设计效果，创建CSS样式表，并在页面中调用：常见媒体查询 /* 平板电脑布局: 481px 至 768px

1.1K8 0

移动web开发_流式布局

视口可以分为布局视口、视觉视口和理想视口 2.1 布局视口 layout viewport 一般移动设备的浏览器都默认设置了一个布局视口，用于解决早期的PC端页面在手机上显示的问题。...iOS, Android基本都将这个视口分辨率设置为 980px，所以PC上的网页大多都能在手机上呈现，只不过元素看上去很小，一般默认可以通过手动缩放网页。...####2.2视觉视口 visual viewport 字面意思，它是用户正在看到的网站的区域。注意：是网站的区域。我们可以通过缩放去操作视觉视口，但不会影响布局视口，布局视口仍保持原来的宽度。...：布局视口的宽度应该与理想视口的宽度一致，简单理解就是设备有多宽，我们布局的视口就多宽总结：我们开发最终会用理想视口，而理想视口就是将布局视口的宽度修改为视觉视口 2.4meta标签最标准的viewport...设置视口宽度和设备保持一致视口的默认缩放比例1.0 不允许用户自行缩放最大允许的缩放比例1.0 最小允许的缩放比例1.0 3.0二倍图 ####3.1物理像素&物理像素比物理像素点指的是屏幕显示的最小颗粒

1.3K1 0

什么是移动端开发【重点学习系列—干货十足–一万字详解】

视觉视口视觉视口就是用户可见的区域。获取方式注：不缩放的情况下，视觉视口宽度 == 布局视口宽度。理想视口宽度与屏幕同宽的布局视口称为理想视口。...理想视口的好处注意：理想视口不是真实存在的视口设置理想视口的方法 2-缩放 PC 端放大时布局视口变小视觉视口变小元素的像素大小不变缩小时布局视口变大视觉视口变大元素的像素大小不变...minimum-scale = 屏幕独立像素宽度 / 视觉视口 maximum-scale 设置允许用户最大缩放比例，苹果浏览器 safari 不认识该属性 maximum-scale = 屏幕独立像素宽度...touchend 手指从元素上离开时触发 touchcancel 触摸被打断时触发这几个事件最早出现于IOS safari中，为了向开发人员转达一些特殊的信息。...，则事件触发的时间间隔为 350ms 左右，如设置完美视口则时间间隔为 5ms 左右。

2.6K2 1

UIWebView 浏览器控件一、初始化与三种加载方式二、常用属性和方法三、代理方法 UIWebViewDelegate四、其它案例：

UIWebView可以缩放HTML页面来适配其视口大小，从而达到整屏显示内容的效果，并且用户可以用捏合动作来放大或缩小页面来查看内容。...默认情况下UIWebView加载HTML页面后，会以页面的原始大小进行显示，亦即如果页面的大小超出UIWebView视口大小，UIWebView会出现滚动效果，而且用户只能通过滚动页面来查看不同区域的内容...这时需要使用一些CSS样式来达到这些效果，这些CSS只适用于IOS中的Safari。 - -webkit-touch-callout 禁用长按触控对象弹出的菜单。...IOS中，当你长按一个触控对象时，如链接，safari会弹出包含链接信息的菜单。...IOS中，在页面元素中进行长按操作，safari会弹出菜单，来允许进行选择行为。

1.5K6 0

移动端viewport属性说明笔记

通过设置视口，不管网页原始的分辨率尺寸有多大，都能将其缩小显示在手机浏览器上，这样保证网页在手机上看起来更像在桌面浏览器中的样子。 # 基础概念像素是计算机屏幕中显示特定颜色的最小区域。...iOS, Android 基本都将这个视口分辨率设置为 980px，所以 PC 上的网页基本能在手机上呈现，只不过元素看上去很小，一般默认可以通过手动缩放网页。 ?...缩放比例关系：当前缩放值 = 理想视口宽度 / 视觉视口宽度用户放大时，视觉视口将会变小，CSS 像素将跨越更多的物理像素。...dip 和设备的物理像素无关，一个 dip 在任意像素密度的设备屏幕上都占据相同的空间。如果用户没有进行缩放，那么一个 CSS 像素就等于一个 dip。 ?...即使设置 user-scalable = no，也可以在 Android Chrome 浏览器中强制启用手动缩放 iOS的Safari浏览器，从10.0版本开始将不在支持user-scalable=no

1.6K2 0

移动端页面开发遇到的一些问题

01 一、meta 标签的相关知识 1、移动端视口宽度等于设备宽度，并禁止缩放。...meta name="viewport" content="width=device-width, initial-scale=1.0" /> 2、移动端页面设置视口宽度等于设备宽度...，并禁止缩放，常用于微信浏览器页面。...-- ios7.0版本以后，safari上已看不到效果 --> 6、将网站添加到主屏幕快速启动方式，仅针对 ios 的 safari 顶端状态条的样式 mobile-web-app-status-bar-style...它在默认的 HTML 元素样式上提供了跨浏览器的高度一致性。相比于传统的CSS reset，Normalize.css是一种现代的、为HTML5准备的优质替代方案。

7582 0

移动端基础

视口可分为布局视口、视觉视口和理想视口 2.1布局视口 layout viewport 一般移动设备的浏览器都默认设置了一个布局视口，用于解决早期的PC端页面在手机上显示的问题 iOS，Android...基本都将这个视口分辨率设置为980px，所以pc上的网页大多都能在手机上呈现，只不过元素看上去很小，一般默认可以通过手动缩放网页。...可以通过缩放去操作视觉视口，但不会影响布局视口，布局视口仍保持原来的宽度 2.3理想视口 ideal viewport 为了使网站在移动端有最理想的浏览和阅读宽度而设定需手动添写meta视口标签通知浏览器操作...meta视口标签的主要目的：布局视口的宽度应与理想视口宽度一致。...4.1单独移动端页面（主流）通常情况下，网址域名前面加m（mobile）可以打开移动端。

1.4K3 1

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭