对以上的文章中的知识点，感觉换另一个角度更好理解一点，记录如下：
屏幕的像素密度：区域像素点总数 / 区域大小
css中的1px显示在像素密度高的屏幕上时，所占据的像素点要多，之所以要这样是因为可以保证，无论在什么分辨率的手机上显示css的1px时，都能保证视觉距离是一致的。
缩/放屏幕时，css中的px所占据的屏幕像素点也会在原来的基础上按照倍数来进行减少/增加
默认情况下（没有设置viewport属性），移动设备上浏览器默认的画布宽度为980px或1024px【视浏览器类型而定】，这个宽度可以通过以下代码来获取
document.documentElement.clientWidth
但如果设置了
<meta name="viewport" content="width=device-width" />
则获取出来的宽度，就是手机屏幕的宽度了。
对页面的渲染过程，可以这么理解：
把页面渲染到一个画布上，这个画布中的1px与css的1px是一一对应的
对于PC浏览器来说，这个所谓的画布就是浏览器的客户区。拖动改变浏览器的宽高，实际上就是改变了这个画布的宽高，这个过程不会影响页面的元素大小
对于移动端的浏览器来说，会相对于PC的渲染过程多出来一个步骤，页面渲染到画布（这个画布的宽度为980px或者1024px）上之后，会等比例缩放这个画布（缩放比例为980px|1024px / 手机屏幕的宽度），来适应显示到手机屏幕上。这就是为什么，默认情况下，一个页面可以在PC上正常显示，但是到了手机上显示，全部东西就都缩小了，如下：
当页面应用了这一句（将移动端的宽度设置为手机屏幕宽度），这样显示到手机屏幕上时，就不需要缩放了
<meta name="viewport" content="width=device-width" />
效果如下：
当移动端页面不再缩放，而且画布大小一样时，手机和PC对于同一个页面的显示效果是一致的：
以上只是通过设置宽度来使缩放比例为1，以达到不缩放的效果，实际上还有另一种方式，可以直接设置缩放比例为1，运行效果和上面的一致
<meta name="viewport" content="initial-scale=1">
总结：width设置的画布的大小，而scale用于设置画布的缩放比例【值为1时，等比例缩放画布，直到画布的宽度等于手机屏幕的宽度】，两者可以同时指定。
对于动态设置meta标签：什么方式都可以，什么时候修改或者添加完成，都会立即生效