移动web开发杂谈

mark 网易新闻解决方案 640px高清设备 适合嵌入app中

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
<meta name="viewport" content="target-densitydpi=device-dpi,width=640" id="viewport">
<script type="text/javascript">
/\* Fix viewport\*/
(function(f,u){
var o=navigator.userAgent,
r=640,
e=f.innerWidthr,
g=f.outerHeighte,
q=f.screen.widthe,
d=f.screen.availWidthe,
n=f.innerHeightr,
p=f.outerHeightn,
a=f.screen.heightn,
k=f.screen.availHeightn,
l=Math.min(e,g,q,d,n,p,a,k),
h=l/r,
b=f.devicePixelRatio;
h=Math.min(h,b);
if(h<1){
var t=",initial-scale="+h+",maximum-scale="+h,
c=u.getElementsByTagName("meta"),
j;
if(/iphoneipod/ig.test(o)){
j=",user-scalable=no"
}
if(/android/ig.test(o)){
j=""
}
t+=j"";
if(/zenlife-android-webview/.test(o)&&!/viewport/.test(o)){
document.querySelector('html').style.zoom = h
}
if(top.location!=location){
document.querySelector('html').style.zoom = h
};
for(var s=0,m;s<c.length;s++){
m=c\[s\];
if(m.name=="viewport"){
m.content+=t}
}
}
}
).call(this,window,document);
</script>

腾讯新闻解决方案 传统自适应 常规方法

1
2
<meta name="format-detection" content="telephone=no, email=no">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">

百度新闻解决方案 兼容低分设备

1
<meta name="viewport" content="width=320.1,minimum-scale=1.0,maximum-scale=1.0">

移动web开发杂谈
https://cszy.top/2015-10-09 移动web开发杂谈/
作者
csorz
发布于
2015年10月9日
许可协议