想请问，iOS10网页viewport怎么禁止缩放

Posted 2023-05-10

参考技术A @罗罗磊磊 ：喜大普奔，喜极而泣，随着iPhone 6和iPhone 6 plus的上市，ios 8终于在上周推送更新了。新的设备，新的分辨率。接下来这篇文章介绍下 iOS 8有哪些变化，全都是为工程师和设计师量身打造写的呦。
概述 简介 iOS 8 上的 Safari 的更新 iPhone 6 和 iPhone 6 Plus 新 Api 支持 Safari 新功能和支持 iOS 8 原生优化 Safari 插件 新的设计 视频增强 iOS 8上的JS Bug 和问题 已经习惯了苹果官方的高冷，这次，苹果依旧没有更新任何与 Safari 或者 iOS 相关的文档，所以下面的所有数据和资料都是基于我自己的测试和 WWDC 上公布的信息。
iOS 8 上的 Safari 支持html5新APIs： WebGL (3D canvas), IndexedDB，Navigation Timing API，Crypto API 混合应用：更快的、优化的WebView 支持滚动 Scroll 事件：终于支持了！ 视频播放: 全屏API，元数据API HTML模板元素 Safari 插件：原生App可以以插件的形式读取网页DOM 图片：支持Image Source Sets和动态PNGAPNG CSS：支持Shapes，支持小数单位 浏览器自动填写表单（支持调用摄像头扫描） 网页和本地应用交互：登录数据共享 EcmaScript 6 ：部分支持 SPDY：支持谷歌家的新网络协议了 文件上传失效了（这是Bug） 移除了minimal-ui属性 支持Yosemite上的远程调试 相比其他移动端上的浏览器，iOS 8并没有支持有些功能：
dp单位的Media queries getUserMedia:访问本地硬件设备，捕获音频和视频的Api WebRTC:网页即时通信 @viewport 声明 Datalist WebP图片 iPhone 6 和 iPhone6 Plus iPhone 6 和 iPhone6 Plus 是苹果继 iPhone 5 后的又一款不同尺寸和不同分辨率的设备。iPhone 6 的参数为4
RSS！
如果你的网站提供了RSS订阅，iOS 8用户可以直接在浏览你网页的时候在书签栏打开他。就是那个@图标里面有个订阅的按钮，虽说有点小低调，但好歹还是有嘛 ﾉ( ´ ▽ ` )ﾉ。

工具栏
现在地址栏和工具栏就变成半透明了。在 iOS 7上只有地址栏是半透明的。这意味着初次加载的时候网页可视区域变得更大（包含了底部的工具栏）。

iPad上的更新
iOS 7以后，使用iPhone上的Safari浏览网页，滚动的时候会自动隐藏工具栏（ipad不会），iOS 8 ipad也有了这个细节上的变化（横竖都有）。不同的是，在横向模式的时候，iPad上面还有一小条，iPhone则是全屏。

除此之外，Safari在横屏模式开启侧边栏会保持原有的viewport大小，只会改变aspect-ratio

书签icon和常用网站
Safari终于支持收藏夹里和书签里的网页附带网站的icon图标。当你在地址栏输入关键字搜索的时候，同样会展示网站的icon（ipad刚刚我测试了下没有）。

跨平台切换
如果你同时使用Mac和iPhone，当你在iPhone上浏览一个网页，你可以在你的Mac上（需要Yosemite）继续阅读（今年WWDC上专门演示了这个功能，还得等到Yosemite的正式更新）。
更像native的webapp 如果你想让用户在网页上，无经确定，就直接跳转到Apple Store下载你的应用，那是不可能的。想让网页与本地应有之间有交互，iOS 8带来更多的便捷性。
Safari插件 共用认证（web和本地应用之间能共用安全凭证，无需再重新登录）。 新的webview
这次iOS 8更新，最令人激动的消息就是混合应用与 Mac 上共同了一套 API，意味着iOS 上也能有更多的功能，Mac 和 iOS的通信交互，还有：
支持javascript与本地应用之间通过postMessage的交互 New classes configure the Web View similar to the power we have on android’s Web View 这里测试下你webapp的性能。

对于那种包壳应用和webviewe应用来说，这个变化是十分重要的。比如说iOS上的Chrome和Facebook本地应用中的网页应用（我们猎豹的电池医生、手机猎豹也大量应用webview）。根据一份报告，11 已经声明即将推出针对 iOS 8的插件。

前端和设计师的福利 这次safari新增了很多html5，css3的支持
CSS Shapes CSS object-fit CSS Background Blend modes word-spacing CSS Compositing and Blending Subpixel layout 支持小数点 Animated PNG supported APNG格式图片 Parallax effects and Pull-to-refresh supported （与Scroll事件相关） SVG Fragments Identifiers (for SVG Sprites) Image Source Set support HTML Template support Animated PNG
APNG格式是PNG位图动画的拓展，但未获得PNG组织官方的认可，与GIF有点类似（只不过GIF是基于JPG的），这意味着我们可以制作32位全彩半透明的动态图。
滚动时差与下拉刷新
如果你做过移动端的项目，你一定知道iOS7以及以前都不支持scrooll事件，iOS 8 终于支持滚动事件，这下大家终于可以在iOS上用到视觉滚差相关的js和css了，但是不保证完全适配。
这个支持让我们可以做出下拉刷新和无限下拉下载的效果。
小数点单位
Safari现在CSS单位从整数转成了浮点数。这意味着CSS对象模型中诸如offsetTop和ClientWidth可能会取得小数值，之前老的iOS都会返回整数值。
与此同时，这也意味着你可以用半个像素单位了。
div border-width: 0.5px; CSS 合成和变形
利用mix-blend-mode这个新属性支持我们把不同形状的不同元素合成到一张图片，这是Adobe在HTML5方面新出的一个功能。在他们的网站（adobe.github.io）上你能看到演示的DEMO和文档。

从Adobe官网的例子演示来看，似乎变形是生效了，合成并没有生效（我Mac Chrome也没生效）。
CSS 形状
CSS 形状也是Adobe新出的一个特性。对于这个特性，推荐下W3Cplus上的《CSS Shapes 101》。个人还是很看好这个特性的推广和应用的，能给我们的网页设计带来更多的可能性。

Image Source Set
有了解响应式图片的开发者对这个应该不陌生，随着高清屏的普及，针对不同的分辨率做适配是一个需要注意的问题，苹果iOS 8 支持Image Source Set Spec，意味着可以在<img>标签中使用新的属性。
<img src="lores.png" srcset="hires.png 2x, superhires.png 3x"> 在上面这段代码的例子中，iPhone 6 Plus 的像素比是3x，它会加载superhires.png这张图片，而iPhone 5s,iPhone 6 则会加载hires.png这种图，其余的则加载lores.png。但是遗憾的是，iOS 暂时还不支持<picture>元素。
HTML模板
<template>对于webapp来说十分有用，<template>中可以包含一段css或者js（不会被浏览器解析），实际应用中，我们可以利用<template>中的代码创建一个新的node。
视频增强 这次更新对视频播放相关的增强了许多，iOS8开始支持全屏播放,Meta Data Api和CSS layering(话说大家知道HTML5 Video元素是可以通过CSS来控制吧？)
<video>元素的全屏播放
Safari不支持全屏播放API，即使是iOS8也不例外。但是能通过一个特殊的方法解决这个问题，在<video>元素中增加一段js。
<input type="button" value="Go Full screen" onclick='document.querySelector("video").webkitEnterFullScreen()'> 视频 Metadata API
Safari开始支持<video>的preload=”metadata”，可以让浏览器触发loadedmetadata事件方便开发者控制。
CSS 分层
我可以通过css控制其他元素放在<video>之前。
iOS 8 JavaScript相关 部分支持ECMAScript 6,包括Promises, Iterators, Maps, For-of, Weak Maps等等。 后台运行：JavaScript会在后台继续运行（哪怕已经切换了窗口甚至Safari切换到后台，但是计时器 times 下降到1s的频率）。 支持scroll事件：不多说了，上面介绍过。 Unprefixed Page Visibility AP ： 我没搞懂这个是什么（哪位知道求指导） 移除window.doNotTrack 支持window.currentScript 9月18更新:
有开发者发现：iPhone 5上的click事件300ms延迟已经取消了（只是Safari），但是其他设备上的Safari和 WebViews 上还有，延迟依旧在 iPod touch, iPads 和iPhone 5s上。
Bug和存在的问题 说了iOS8和iPhone 的更新，再来说说目前发现的 Bug。
不支持文件上传！！！所有的文件上传都失效了，你能选择或者拍张照片，但是js不能获得任何数据。HTML或者XMLHttpRequest的POST请求也不行。但是这个问题但是在桌面启动的app没发生。 WKWebKit：在新的引擎不能读取本地文件是个大问题，所以对于混合app来说，还得使用老的UIWebView。 window.prompt可能会导致Safari崩溃 附件:语音在input和labels输入时，不管用。(当输入的时候，label不再发音) 桌面app的iframes中,touch事件没有被监测到。 手机休眠后，桌面app中的Timers和requestAnimationFrame回调没有执行。 译者言 iOS 8给web前端带来的变化还是很令人欣喜的，更强大的性能，更强大的浏览器和内核，更开放的接口，可以预见在针对iOS的web应用会有一个更大的用武之地。
文章很长，大量技术词汇，翻译了半天，若译文有错误或者不妥之处，欢迎指正和提供建议。本回答被提问者采纳

禁止页面缩放

  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">　　

在这个里面主要有这几个属性：

1.width - viewport的宽度

2.height - viewport的高度

3.initial-scale - 初始的缩放比例

4.minimum-scale - 允许用户缩放到的最小比例

5.maximum-scale - 允许用户缩放到的最大比例

6.user-scalable - 用户是否可以手动缩放
如果要禁止页面缩放，只要把user-scalable 设置成no 就可以