XiangJv

遇见这个问题的情景是当时需要实现一部分浏览器简单的分享和屏幕大小的缩放，分享默认的就是title和meta的desption和 viewport属性做更改 但跟SEO没什么关系，因为SEO针对的是页面的源代码，只能动态改一下东西 比如fontSize

 

动态设置viewport的scale

document.querySelector('meta[name="viewport"]')

var scale = 1 / devicePixelRatio;
document.querySelector('meta[name="viewport"]').setAttribute('content','initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no');

 

动态计算html的font-size

布局的时候，各元素的css尺寸=设计稿标注尺寸/设计稿横向分辨率/10(自己给的值，根据代码编写的设计稿定)

document.documentElement.style.fontSize = document.documentElement.clientWidth / 10 + 'px';




// 设计稿的尺寸=元素css尺寸*html的fontsize（rem，这就是计算上面计算中给出的10）

// 例 设计稿750px  =   元素10rem  *   html的fontsize（75px）

// 当屏幕为1500px时（为保证比例一致）  =   设计稿750px  *   2   =  元素10rem    *   html的fontsize（75  *  2）

// 即导出     html的fontsize（不停在变的）的计算公式  =   屏幕尺寸  /  元素的rem（固定不变的）

// 当屏幕大于设计稿的尺寸的时候一般采用跳转手机站

 

动态修改页面的title

document.title = 'www.xiangjv.top'