苹果(Safari)浏览器的图片width设置为100%但实际显示为980px改成的问题方法
最近在做一个页面时，发现在 iPad 的 Safari 浏览器中背景显示不全，定位到该 div 后发现所指定 css 的宽度为 100% ；到百度搜索后发现，safari 中 viewport 默认宽度为 980px，若事先未指定其初始 viewport 宽度，则会默认按照 980px 处理。可以默认初始化 viewport 宽度或在 css 中设定 min-width，但最简单的方法可以在 head 标签中初始化好 viewport。在设置viewport前先来介绍一下html中viewport：移动设备上的viewport是设备屏幕上用来显示网页的那部分区域，再具体一点就是浏览器上用来显示网页的那部分区域，但viewport又不局限于浏览器可视区域的大小，它可能比浏览器的可视区域大，也可能比浏览器的可视区域小。在默认情况下，移动设备上的viewport都是大于浏览器可视区域的，这是因为移动设备的分辨率相对于PC来说都比较小，所以为了能在移动设备上正常显示那些为PC浏览器设计的网站，移动设备上的浏览器都会把自己默认的viewport设为980px或1024px（也可能是其它值，由设备本身决定），但后果是浏览器出现横向滚动条，因为浏览器可视区域的宽度比默认的viewport的宽度小。viewport分为三种：（1）layout viewport（布局窗口）layout viewport是网页布局的区域，它是<html>元素的父容器。只要你不在css中修改<html>元素的宽度，<html>元素的宽度就会撑满layout viewport的宽度。很多时候浏览器窗口没有办法显示出layout viewport的全貌，但是它确实是已经被加载出来了，这个时候滚动条就出现了，你需要通过滚动条来浏览layout viewport其他的部分。layout viewport用css像素来衡量尺寸，在缩放、调整浏览器窗口的时候不会改变。缩放、调整浏览器窗口改变的只是visual viewport。在桌面浏览器中，缩放为100%的时候，Layout Viewport宽度等于内容窗口的宽度。（你几乎不会在电脑上见过横向滚动条，除非你调整缩放）但是在移动端，缩放为100%的时候，Layout Viewport不一定等于内容窗口的大小。当你用手机浏览浏览宽大的网页（这些网页没有采用响应式设计）的时候，你只能一次浏览网页的一个部分，然后通过手指滑动浏览其他部分。这就说明整个网页（Layout Viewport）已经加载出来了，只不过你要一部分一部分地看。如果把移动设备上浏览器的可视区域设为viewport的话，某些网站会因为viewport太窄而显示错乱，所以这些浏览器就默认会把viewport设为一个较宽的值，比如980px，使得即使是那些为PC浏览器设计的网站也能在移动设备浏览器上正常显示。这个浏览器默认的viewport叫做 layout viewport。layout viewport的宽度可以通过 document.documentElement.clientWidth来获取。（2）visual viewport（视觉窗口）visual viewport就是显示在屏幕上的网页区域。通过前面的说明你应该已经知道visual viewport了：它往往只显示layout viewport的一部分。visual viewport就像一台摄像机，layout viewport就像一张纸，摄像机对准纸的哪个部分，你就能看见哪个部分。你可以改变摄像机的拍摄区域大小（调整浏览器窗口大小），也可以调整摄像机的距离（调整缩放比例），这些方法都可以改变visual viewport，但是layout viewport始终不变。visual viewport用css像素来衡量尺寸，表示有多少个css像素能够被用户看到。layout viewport的宽度是大于浏览器可视区域的宽度的，所以还需要一个viewport来代表浏览器可视区域的大小，这个viewport叫做 visual viewport。visual viewport的宽度可以通过 document.documentElement.innerWidth来获取。举个栗子：为了让小小的手机屏幕也能够浏览宽大的网页（这些网页没有采用响应式设计），手机浏览器将layout viewport的默认宽度设为与电脑浏览器一样，比如980px，1024px（单位：CSS像素）。由于手机的屏幕逻辑像素宽度一般只有300~400逻辑像素，因此需要将多个css像素由1个逻辑像素显示（也就是缩小，千万不要忘记缩放比例=css像素边长/逻辑像素边长），让手机屏幕显示的css像素与网页的css像素一样多了，也就是visual viewport = layout viewport。（3）ideal viewport（理想窗口）ideal viewport是一个能完美适配移动设备的viewport。首先，不需要缩放和横向滚动条就能正常查看网站的所有内容；其次，显示的文字、图片大小合适，如14px的文字不会因为在一个高密度像素的屏幕里显示得太小而无法看清，无论是在何种密度屏幕，何种分辨率下，显示出来的大小都差不多。这个viewport叫做 ideal viewport。ideal viewport并没有一个固定的尺寸，不同的设备有不同的ideal viewport。例如，所有的iphone的ideal viewport宽度都是320px，无论它的屏幕宽度是320还是640。ideal viewport 的意义在于，无论在何种分辨率的屏幕下，针对ideal viewport 而设计的网站，不需要缩放和横向滚动条都可以完美地呈现给用户。下面来介绍一下苹果(Safari)浏览器的图片width设置为100%但实际显示为980px解决方法：利用meta标签对viewport进行控制移动设备默认的viewport是layout viewport，，但在进行移动设备网站的开发时，需要的是ideal viewport。要得到ideal viewport，需要用到meta标签。head标签中加入：<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">该meta标签的作用是让当前viewport的宽度等于设备的宽度，同时不允许用户手动缩放。当然maximum-scale=1.0, user-scalable=0不是必需的，是否允许用户手动播放根据网站的需求来定，但把width设为width-device基本是必须的，这样能保证不会出现横向滚动条。meta viewport 的6个属性：width 设置layout viewport 的宽度，为一个正整数，或字符串"width-device"initial-scale 设置页面的初始缩放值，为一个数字，可以带小数minimum-scale 允许用户的最小缩放值，为一个数字，可以带小数maximum-scale允许用户的最大缩放值，为一个数字，可以带小数height 设置layout viewport 的高度，这个属性并不重要，很少使用user-scalable 是否允许用户进行缩放，值为"no"或"yes", no 代表不允许，yes代表允许width能控制layout viewport的宽度，如果不指定该属性，layout viewport将默认为980px或1024px（也可能是其它值，由设备本身决定），如果把layout viewport的宽度设置为移动设备的宽度，那么layout viewport将成为ideal viewport。其实，要把当前的viewport宽度设为ideal viewport的宽度，既可以设置width=device-width，也可以设置initial-scale=1，但有一个小缺陷，就是width=device-width会导致iphone、ipad横竖屏不分，initial-scale=1会导致IE横竖屏不分，都以竖屏的ideal viewport宽度为准。所以，最完美的写法两者都写上去， initial-scale=1 解决 iphone、ipad的缺陷，width=device-width解决IE的缺陷。viewport设置移动端自适应的方法：<meta name="viewport" content="width=device-width, initial-scale=1">最后还有俩个meta属性也可以了解下：<meta name="apple-mobile-web-app-capable" content="yes" /> // 设定iphone端页面全屏 <meta name="format-detection" content="telephone=no" />// 取消数字被识别为电话号码。