viewport 640宽的做法 针对iphone和安卓单独设置
<!DOCTYPE html>
<html lang="ch">
<head>
<meta charset="utf-8" />
<meta HTTP-EQUIV="pragma" CONTENT="no-cache">
<meta HTTP-EQUIV="Cache-Control" CONTENT="no-cache, must-revalidate">
<meta HTTP-EQUIV="expires" CONTENT="0">
<meta name="apple-touch-fullscreen" content="yes" />
<meta name="format-detection" content="telephone=no" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta http-equiv="Expires" content="-1" />
<meta http-equiv="pragram" content="no-cache" /> <base href="http://app.cntcma.com/">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>第二届京津冀协同发展论坛</title><meta name="sharecontent" data-msg-img='http://app.cntcma.com/attachments/image/20141113/20141113205001_32033.png' data-msg-title='第二届京津冀协同发展论坛' data-msg-content='敬请关注' data-msg-callBack='' data-line-img='http://app.cntcma.com/attachments/image/20141113/20141113205001_32033.png' data-line-title='第二届京津冀协同发展论坛' data-line-callBack='' />
<script type="text/javascript">
if(/Android (\d+\.\d+)/.test(navigator.userAgent)){
var version = parseFloat(RegExp.$1);
if(version>2.3){
var phoneScale = parseInt(window.screen.width)/640;
document.write('<meta name="viewport" content="width=640, minimum-scale = '+ phoneScale +', maximum-scale = '+ phoneScale +', target-densitydpi=device-dpi">');
}else{
document.write('<meta name="viewport" content="width=640, target-densitydpi=device-dpi">');
}
}else{
document.write('<meta name="viewport" content="width=640, user-scalable=no, target-densitydpi=device-dpi">');
} //微信去掉下方刷新栏
if(RegExp("MicroMessenger").test(navigator.userAgent)){
document.addEventListener('WeixinJSBridgeReady', function() {
WeixinJSBridge.call('hideToolbar');
});
}
</script>
参考的页面:http://app.cntcma.com/wx/35f4a8d465e6e1edc05f3d8ab658c551.html
还看见一个鸡贼的东西
width: 100%;
max-width: 600px;
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
这个更省事,都不用单独写viewport了
css动画里面播放完了,不在初始位置,而在最终位置的css规则为
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
要想div高度100%,先得设置 html和body的高度100%
viewport 640宽的做法 针对iphone和安卓单独设置的更多相关文章
- H5页面适配所有iPhone和安卓机型的六个技巧
http://www.th7.cn/web/html-css/201605/166006.shtml http://www.th7.cn/web/html-css/201601/153127.shtm ...
- 如果需要将UIView的4个角全部都为圆角,做法相当简单,只需设置其Layer的cornerRadius属性即可
如果需要将UIView的4个角全部都为圆角,做法相当简单,只需设置其Layer的cornerRadius属性即可(项目需要使用QuartzCore框架).而若要指定某几个角(小于4)为圆角而别的不变时 ...
- 关于iphone、安卓手机VPN全面解析
现在智能手机功能越来越强大,网络APP层出不穷,社交大佬facebook.twitter等纷纷推出了自己的社交APP应用,大部分手机已经内置了很多社交应用,包括facebook等:android.io ...
- iphone与安卓的兼容性问题汇总
1.日期问题 当使用yyyy-mm-dd格式时,iphone不认,安卓没问题 解决办法:new Date(res.data[i].inventoryDate.replace(/-/g, "/ ...
- 移动平台前端开发总结(针对iphone,Android等手机)
移动平台前端开发是指针对高端智能手机(如Iphone.Android)做站点适配也就是WebApp,并非是针对普通手机开发Wap 2.0,所以在阅读本篇文章以前,你需要对webkit内核的浏览器有一定 ...
- 针对iPhone的pt、Android的dp、HTML的css像素与dpr、设计尺寸和物理像素的浅分析
最近被一朋友问到:css中设置一DOM的height:65px,请问显示的高度是否和Android的65dp的元素等高?脑子里瞬间闪现了一堆的概念,如dpr,ppi,dp,pt等,然而想了一阵,浆糊了 ...
- 如何针对 iPhone X 设计网站?
在全面屏的 iPhone X 上,不需要而外的代码,Safari 可以非常完美的展示现有的网站.整个网站的内容都会自动地展示在一个“安全区域”内,并不会被四周的圆角或者“小刘海”遮挡住. Safari ...
- 微信也有土豪版 针对iPhone 6/6 Plus进行优化
土豪们最近都上手iPhone 6/6 Plus了,烦恼的是iPhone 6/Plus增大了屏幕和分辨率,由此带来了不少应用的适配问题,排版乱了,app周边多了一片空白,是不是很煞风景?微信团队昨天放出 ...
- unity针对iphone的屏幕旋转
屏幕旋转可以在引擎里设置: 依次点开 Edit——Project Setting——Player 即可设置如图: 接下来的是 雨松大神的 代码控制,本屌是安卓机器,没能测试. C# using Uni ...
随机推荐
- ModelAndView存取数Model、Map、ModelMap
1.从名字上看ModelAndView中的Model代表模型,View代表视图,这个名字就很好地解释了该类的作用.(对应mvc配置,寻找模型,返回视图.) 2.业务处理器调用模型层处理完用户请求后,把 ...
- org.springframework.web.struts.DelegatingActionProxy
之前也不知道用的是哪个版本的spring jar 包,后来换了之后发现问题出来了, 00:08:00,364 ERROR RequestProcessor:296 - No action instan ...
- hdu4815 概率问题
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=4815 好久没写dp了..最开始题意都理解错了, 哎!!我现在很饿也很困!! AC代码: #includ ...
- HDU1430;魔板(BFS+康托展开)
传送门 题意 给出初始序列与终止序列,给出三种操作,问最少经过几次操作能使初始->终止,输出操作(字典序最小) 分析 字符串只有8个字符,使用康托展开. 1.BFS将所有序列从"123 ...
- 洛谷 P3731 [HAOI2017]新型城市化【最大流(二分图匹配)+tarjan】
我到底怎么建的图为啥要开这么大的数组啊?! 神题神题,本来以为图论出不出什么花来了. 首先要理解'团'的概念,简单来说就是无向图的一个完全子图,相关概念详见度娘. 所以关于团一般都是NP问题,只有二分 ...
- [App Store Connect帮助]七、在 App Store 上发行(4)分阶段发布某个版本更新(iOS 和 watchOS)
当您发布您 App 的一个版本更新时,您可以选择分阶段发布您的 iOS App.如果您正在提交一个 iOS 版本更新,且您的 App 处于以下 App 状态之一,则此选项可用. 准备提交 正在等待审核 ...
- 【练习总结】题目:筛法遍历素数(Java)
初学Java,学到流程控制的循环,有个练习题是暴力遍历素数. 因为看过av32186751,知道有个筛法,就想试试. 又受到线性筛法(一)--素数筛法(一) - nerd呱呱 - 博客园中,的这段启发 ...
- UART、I2C、SPI三种协议对比
学嵌入式需要打好基础 下面我们来学习下计算机原理里的3种常见总线协议及原理 协议:对等实体之间交换数据或通信所必须遵守规则或标准的集合 1.UART(Universal Asynchronous Re ...
- logstsh | logstash-input-jdbc 启动错误收集
1: Failed to execute action {:action=>LogStash::PipelineAction::Create/pipeline_id:main, :excepti ...
- poj 1061 青蛙约会(扩展欧几里德)
题目链接: http://poj.org/problem?id=1061 题目大意: 中文题目,题意一目了然,就是数据范围大的出奇. 解题思路: 假设两只青蛙都跳了T次,可以列出来不定方程:p*l + ...