移动端H5页面自适应手机屏幕宽度
https://www.cnblogs.com/yzadd/p/6437664.html
移动端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页面自适应手机屏幕宽度相关推荐
- h5页面自适应手机屏幕宽度
在html head中添加: <script type="text/javascript"> var phoneScale = parseInt(window.scre ...
- 移动页面自适应手机屏幕宽度
关于移动页面自适应手机屏幕宽度的一点总结[站在巨人的肩膀上] 使用meta标签 最常用的方法,理论上讲使用这个标签是可以适应所有尺寸的屏幕的,但是各设备对该标签的解释方式及支持程度不同造成了不能兼容所 ...
- 移动页面自适应手机屏幕宽度HTML5开发
网上关于这方面的文章有很多,重复的东西本文不再赘述,仅提供思路,并解释一些其他文章讲述模糊的地方. 1.使用meta标签,这也是普遍使用的方法,理论上讲使用这个标签是可以适应所有尺寸的屏幕的,但是各设 ...
- h5实现网页内容跟随窗口大小移动_HTML5使用四种方法实现移动页面自适应手机屏幕的方法总结...
这篇文章主要介绍了HTML5 移动页面自适应手机屏幕四类方法总结,非常具有实用价值,需要的朋友可以参考下 1.使用meta标签:viewport H5移动端页面自适应普遍使用的方法,理论上讲使用这个标 ...
- Webview--如何让加载进来的页面自适应手机屏幕分辨率居中显示
让Webview加载的页面居中显示有我知道的俩种方法 第一种: [java] WebSettings settings = webView.getSettings(); settings.setL ...
- Webview--如何让加载进来的页面自适应手机屏幕分辨率
让Webview加载的页面居中显示有我知道的俩种方法 第一种: [java] view plaincopy WebSettings settings = webView.getSettings(); ...
- 安卓+ios系统--手机端页面自适应手机屏幕大小,禁止手动放大和缩小VUE
项目需求 手机端,页面自适应手机屏幕大小,不能手动放大和缩小. 1.代码 在index.html中加入下面的代码: <!-- 手机端页面自适应手机大小,禁止手动放大 --> <met ...
- 设置H5页面适应手机屏幕
移动开发如火如荼,越来越多开发注重手机网页适应.因为要做微信公众号做报名网页,将做好的页面在手机上测试发现页面显示是典型的电脑页面在移动端打开的现象,左右显示不全,查了资料才知道要使页面适用手机屏幕, ...
- HTML5 实现图片宽度自适应手机屏幕宽度的CSS
HTML5实现图片自适应手机屏幕页面的css. HTML5写手机页面,读取图片,如果图片大于手机屏幕的宽度,就显示100%屏幕,如果小于,就显示原图. CSS的max-width就能实现了,切不要设置 ...
最新文章
- 【怎样写代码】偷窥高手 -- 反射技术(七):通过反射实例化对象
- 限制oracle数据库表的输出记录条数
- SAP标准OK Code Values 列表
- 在CentOS6.x下安装Compiz——桌面立方体,特效种种
- SVG.js 颜色渐变使用
- templet 显示字段外键对应名_主外键和外键约束
- java6和java7的区别_Java String的intern方法 在JDK6和JDK7的不同行为
- 小D课堂 - 零基础入门SpringBoot2.X到实战_第4节 Springboot2.0单元测试进阶实战和自定义异常处理_21、SpringBoot2.x配置全局异常返回自定义页面...
- atitit.文件上传带进度条的实现原理and组件选型and最佳实践总结O7
- 基于机器视觉技术的表面缺陷检测技术综述
- word中没文字地方添加下划线方法
- 怎样设置和检测浏览器语言
- windows安装scala
- 七个技巧!Godaddy域名安全指数提高N倍
- SMTP:mail、sendmail、mailx、postfix等邮件服务总结
- 导出数据提示--secure-file-priv选项问题的解决方法
- 机器人系统仿真(七)——xacro语法详解
- 2022年“研究生科研素养提升”系列公益讲座在线测评题目
- Bandizip绿色版上下文菜单解决办法
- windows系统快捷调出任务管理器
热门文章
- 汤晓丹的第四版计算机操作系统--第四章总结概述
- 移植u-boot-2016.11到TQ2440开发板全过程记录
- 新購電腦筆記 - G1.Sniper B7 內建網路晶片在 Mint 17.2(Cinnamon)上無法使用(已解決)...
- Python学习笔记7:实操案例四(支付密码的验证,模拟QQ账号登录,商品价格竞猜,星座看运势)
- win7计算机iis,Win7系统怎么打开iis功能?Win7系统打开iis功能的方法
- 关于PC播放器色彩空间转换等一些说明
- 技术干货:赛车游戏中最短路径和最小曲率路径算法
- Hive内部表及外部表
- 用记事本编写HTML蓝莲花,我的记事本!
- 让li 横排显示的CSS代码