移动端H5页面自适应手机屏幕宽度
1.由于本人使用的是sublime.text,使用rem就可以达到效果。
点击菜单中的preferences下的browse packages,选择cssrem-master,添加或者编写cssrem.sublime-settings文件。
设置px_to_rem的值为75即可。
在代码里输入设置的对应px值,按TAB键就可以转换为rem
在使用时,同事引用flexible.js文件
2.<meta name="apple-mobile-web-app-capable" content="yes">
下面()里的不用
(使用meta标签,这也是普遍使用的方法,理论上讲使用这个标签是可以适应所有尺寸的屏幕的,但是各设备对该标签的解释方式及支持程度不同造成了不能兼容所有浏览器或系统。
首先解释该标签的含义:<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
如果你完全不了解这个标签的使用需要先百度一下。
解释:content中的“width” 这个width指的是什么宽度,我看过的文章对这个都没有解释的很清楚,有几个备选:虚拟窗口的宽度、手机屏幕的宽度、还是页面的宽度等等?经试验这个指的是虚拟窗口的宽度。了解宽度之后,对后续的各种scale,就应该知道是谁与谁的比例,是 虚拟窗口宽度 / 页面宽度,这样就会有问题出现安卓设备尺寸差异很大光主流的就有宽度为 320 480 720 1080 等各种尺寸而以上标签只能支持一种尺寸,当然有些浏览器会自动缩放使其适应屏幕,但这不是统一标准,正确的做法是用js动态生成此标签,当然,应该先获取屏幕尺寸。)
<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">');
}
</script>
3.微信分享要引用的<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
4.使用媒体查询功能 比如兼容iphone的样式 @media only screen and (min-device-width : 320px) and (max-device-height : 460px){}
做到以上几点,基本的自适应就可以了
移动端H5页面自适应手机屏幕宽度的更多相关文章
- web页面自适应手机屏幕宽度
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scal ...
- 移动页面HTML5自适应手机屏幕宽度
标签: 网上关于这方面的文章有很多,重复的东西本文不再赘述,仅提供思路,并解释一些其他文章讲述模糊的地方. 1.使用meta标签,这也是普遍使用的方法,理论上讲使用这个标签是可以适应所有尺寸的屏幕的, ...
- HTML5 移动页面自适应手机屏幕四类方法
1.使用meta标签:viewport H5移动端页面自适应普遍使用的方法,理论上讲使用这个标签是可以适应所有尺寸的屏幕的,但是各设备对该标签的解释方式及支持程度不同造成了不能兼容所有浏览器或系统. ...
- 》》HTML5 移动页面自适应手机屏幕四类方法
1.使用meta标签:viewport H5移动端页面自适应普遍使用的方法,理论上讲使用这个标签是可以适应所有尺寸的屏幕的,但是各设备对该标签的解释方式及支持程度不同造成了不能兼容所有浏览器或系统. ...
- 转帖 移动端h5页面不同尺寸屏幕适配兼容方法
1. viewport属性及html页面结构 <meta name="viewport" content="width=device-width,initial ...
- WAP网站WML或HTML页面自适应手机屏幕实现方法
把图片和div的宽度都设置成:width:100%就可以了
- 移动端 css实现自适应正圆 ( 宽高随着手机屏幕宽度自适应 )
序言:应朋友要求随手写了一下移动端 css实现自适应正圆 ( 宽高随着手机屏幕宽度自适应 ) ,以备后用 LESS代码: .adaptive-circle { margin: 50px auto 0; ...
- vue移动端h5页面根据屏幕适配的四种方案
最近做了两个关于h5页面对接公众号的项目,不得不提打开微信浏览器内置地图导航的功能确实有点恶心.下次想起来了的话,进行总结分享一下如何处理.在vue移动端h5页面当中,其中适配是经常会遇到的问题,这块 ...
- flexible.js在华某为手机上使用rem时,页面宽度超出手机屏幕宽度
问题:手机端项目在华为的某款手机上显示时页面内容没有自适应手机宽度,出现横向滚动条 原因:手机获取手机屏幕宽度并计算出rem时出现偏差,明显宽余真实手机屏宽度 解决方案一:在页面里获取页面最外层dom ...
随机推荐
- Python基础--人们一些最爱的标准库(random time)
Python继续! random 包括返回随机数的函数. 这里跟C++一样,产生的是伪随机数,并非全然随机数. random中一些重要的函数: random() 返回0<n<=1的随机数n ...
- 基于Opencv自带BP网络的车标简易识别
代码地址如下:http://www.demodashi.com/demo/12966.html 记得把这几点描述好咯:代码实现过程 + 项目文件结构截图 + 演示效果 1.准备工作 1.1 训练集和测 ...
- 【MyBatis学习09】高级映射之一对多查询
上一篇博文总结了一下一对一的映射,本文主要总结一下一对多的映射,从上一篇文章中的映射关系图中可知,订单项和订单明细是一对多的关系,所以本文主要来查询订单表,然后关联订单明细表,这样就有一对多的问题出来 ...
- silverlight 对ChildWindow返回给父窗体值的理解(转载)
这篇文章是我对ChildWindow的理解,举例说明: 有时候在项目中需要弹出子窗体进行一些操作,然后将操作的值返回到父窗体中. 下图是子窗体的界面(比较粗糙....) 下面贴出其代码: 子窗体前台代 ...
- Win 7+Anaconda+tensorflow
Anaconda是一种拥有各种Python库的集成环境,也支持Windows.Mac和Linux系统. 1.安装 Anaconda 安装包:https://www.continuum.io/downl ...
- NIO之缓冲区(Buffer)的数据存取
缓冲区(Buffer) 一个用于特定基本数据类行的容器.有java.nio包定义的,所有缓冲区都是抽象类Buffer的子类. Java NIO中的Buffer主要用于与NIO通道进行交互,数据是从通道 ...
- Atitit.嵌入式web 服务器 java android最佳实践
Atitit.嵌入式web 服务器 java android最佳实践 1. Android4.4.21 2. 自己的webserver1 3. CyberHTTP for Java cybergar ...
- Angularjs学习笔记8_directive2
指令难点在于参数 angular.module('app', []) .directive('myDirective', function() { return { restrict: String, ...
- C++语言基础(10)-虚继承
一.产生背景 先看下列一份代码: //间接基类A class A{ protected: int m_a; }; //直接基类B class B: public A{ protected: int m ...
- 常用的Http组件
日常生活中,我们接触最多的Http组件就是浏览器了!但是,还有其他也很重要的组件,下面容我慢慢盘点: 1.代理服务器 代理服务器就是帮助我们发送请求报文,接受响应报文的服务器.对web服务器而言,代理 ...