123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140 |
- var adaptUILayout = (function() {
- //根据校正appVersion或userAgent校正屏幕分辨率宽度值
- var regulateScreen = (function() {
- var cache = {};
- //默认尺寸
- var defSize = {
- width: window.screen.width,
- height: window.screen.height
- };
- var ver = window.navigator.appVersion;
- var _ = null;
- var check = function(key) {
- return key.constructor == String ? ver.indexOf(key) > -1 : ver.test(key);
- };
- var add = function(name, key, size) {
- if (name && key)
- cache[name] = {
- key: key,
- size: size
- };
- };
- var del = function(name) {
- if (cache[name])
- delete cache[name];
- };
- var cal = function() {
- if (_ != null)
- return _;
- for (var name in cache) {
- if (check(cache[name].key)) {
- _ = cache[name].size;
- break;
- }
- }
- if (_ == null)
- _ = defSize;
- return _;
- };
- return {
- add: add,
- del: del,
- cal: cal
- };
- })();
- //实现缩放
- var adapt = function(uiWidth) {
- var
- deviceWidth,
- devicePixelRatio,
- targetDensitydpi,
- //meta,
- initialContent,
- head,
- viewport,
- ua;
- ua = navigator.userAgent.toLowerCase();
- //whether it is the iPhone or iPad
- isiOS = ua.indexOf('ipad') > -1 || ua.indexOf('iphone') > -1;
- //获取设备信息,并矫正参数值
- devicePixelRatio = window.devicePixelRatio;
- deviceWidth = regulateScreen.cal().width;
- //获取最终dpi
- targetDensitydpi = uiWidth / deviceWidth * devicePixelRatio * 160;
- //use viewport width attribute on the iPhone or iPad device
- //use viewport target-densitydpi attribute on the Android device
- initialContent = isiOS ?
- 'width=' + uiWidth + ', user-scalable=no' :
- 'target-densitydpi=' + targetDensitydpi + ', width=' + uiWidth + ', user-scalable=no';
- //add a new meta node of viewport in head node
- head = document.getElementsByTagName('head');
- viewport = document.createElement('meta');
- viewport.name = 'viewport';
- viewport.content = initialContent;
- head.length > 0 && head[head.length - 1].appendChild(viewport);
- };
- return {
- regulateScreen: regulateScreen,
- adapt: adapt
- };
- })();
- /*
- *375为当期页面指定的统一分辨率,其他分辨率下均为此分辨率的放缩变化
- */
- adaptUILayout.adapt(375);
- //rem初始化代码
- /*function adapt(designWidth, rem2px){
- var d = window.document.createElement('div');
- d.style.width = '1rem';
- d.style.display = "none";
- var head = window.document.getElementsByTagName('head')[0];
- head.appendChild(d);
- var defaultFontSize = parseFloat(window.getComputedStyle(d, null).getPropertyValue('width'));
- d.remove();
- document.documentElement.style.fontSize = window.innerWidth / designWidth * rem2px / defaultFontSize * 100 + '%';
- var st = document.createElement('style');
- var portrait = "@media screen and (min-width: "+window.innerWidth+"px) {html{font-size:"+ ((window.innerWidth/(designWidth/rem2px)/defaultFontSize)*100) +"%;}}";
- var landscape = "@media screen and (min-width: "+window.innerHeight+"px) {html{font-size:"+ ((window.innerHeight/(designWidth/rem2px)/defaultFontSize)*100) +"%;}}"
- st.innerHTML = portrait + landscape;
- head.appendChild(st);
- return defaultFontSize
- };
- var defaultFontSize = adapt(640, 100);
- */
- //H5翻转屏幕事件
- /*function orientationChange() {
- switch(window.orientation) {
- case 0:
- alert("肖像模式 0,screen-width: " + screen.width + "; screen-height:" + screen.height);
- break;
- case -90:
- alert("左旋 -90,screen-width: " + screen.width + "; screen-height:" + screen.height);
- break;
- case 90:
- alert("右旋 90,screen-width: " + screen.width + "; screen-height:" + screen.height);
- break;
- case 180:
- alert("风景模式 180,screen-width: " + screen.width + "; screen-height:" + screen.height);
- break;
- };
- };
- // 添加事件监听
- addEventListener('load', function(){
- orientationChange();
- window.onorientationchange = orientationChange;
- });
- */
|