`
chenfeng_lian
  • 浏览: 10401 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

h5页面适配简单设置

 
阅读更多
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<title>DEMO</title>
	<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" />
    <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-touch-fullscreen" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <style type="text/css"></style>
    <script type="text/javascript">
    	(function(d,c){var e=d.documentElement,b="orientationchange" in window?"orientationchange":"resize",a=function(){var f=(e.clientWidth<=320)?320:((e.clientWidth>=640)?640:e.clientWidth);if(!f){return}e.style.fontSize=100*(f/320)+"px"};if(!d.addEventListener){return}c.addEventListener(b,a,false);d.addEventListener("DOMContentLoaded",a,false)})(document,window);
    	/**(function (doc, win) {
		    var docEl = doc.documentElement,
		        resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
		        recalc = function () {
		            //var clientWidth = docEl.clientWidth;
		            var clientWidth = (docEl.clientWidth <= 320) ? 320 : ((docEl.clientWidth >= 640) ? 640 : docEl.clientWidth);
		            if (!clientWidth) return;
		            docEl.style.fontSize = 100 * (clientWidth / 320) + 'px';
		        };
		    if(!doc.addEventListener) return;
		    win.addEventListener(resizeEvt, recalc, false);
		    doc.addEventListener('DOMContentLoaded', recalc, false);
		})(document, window);*/
    </script>
	<style type="text/css">
		.div1{font-size: 12px;}
		.div2{font-size: 0.12rem;}
	</style>
</head>
<body>
	<div class="div1">小学高级教师 .1998参加工作。勤奋刻苦,踏实、认真。多次获镇优秀教师称号</div>	
	<div class="div2">小学高级教师 .1998参加工作。勤奋刻苦,踏实、认真。多次获镇优秀教师称号</div>		   
</body>
</html>

 

分享到:
评论

相关推荐

    vue写h5页面的方法总结

    总的来说,使用Vue.js编写H5页面,需要重点关注移动设备的适配问题,通过使用rem布局和灵活的脚本库,如lib-flexible,来简化开发流程。同时,借助合适的工具和插件来提高工作效率,确保H5页面在各种移动设备上均能...

    手机页面h5的简单demo

    在移动互联网时代,H5(HTML5)技术已经成为构建手机页面的重要工具,它极大地提升了网页在移动设备上的表现力和交互...通过学习和分析这个demo,我们可以掌握如何构建适应各种手机屏幕、交互性强、功能丰富的H5页面。

    移动端H5页面控制台打印信息:vconsole

    在移动端H5页面开发中,由于手机浏览器的限制,开发者往往无法直接在设备上查看到JavaScript的控制台输出信息,这给调试带来了诸多不便。为了解决这个问题,开发者社区提出了一个名为vConsole的解决方案。vConsole是...

    使用bootstrap的H5页面登录框自适应水平居中、垂直居中

    在创建H5页面时,我们常常需要实现登录框等组件在不同屏幕尺寸下的自适应水平居中和垂直居中。在标题和描述中提到的问题,即在使用Bootstrap时,登录框无法自动在视觉中心对齐,这通常是因为Bootstrap的栅格系统和...

    简单好看404页面模板,自带适配,适合各种网站

    这个“简单好看404页面模板”专为此目的而设计,旨在为用户提供友好的用户体验,即使他们误入了错误的链接。 该模板以“宇航员404丢失”为主题,通过创意的设计吸引用户的注意力,同时传达出“找不到页面”的信息。...

    H5页面适配iPhoneX(就是那么简单)

    笔者通过查阅了一些官方文档,以及结合实际项目中的一些处理经验,整理了一套简单的适配方案分享给大家,希望对大家有所帮助,以下是处理前后效果图: 大家都知道,iphoneX,屏幕顶部都有一个齐刘海,iPhoneX 取消...

    掘金收藏集简单示例_微信小程序模板js代码前台前端H5页面源码.rar

    从标题和描述中我们可以推测,这个示例集旨在展示如何在微信小程序中构建一个简单的收藏功能,同时可能也提供了适配H5页面的解决方案。 首先,我们来深入理解微信小程序。微信小程序是腾讯公司推出的一种轻量级的...

    H5-ANDROID混合开发二维码扫描功能

    在混合开发中,开发者会将H5页面嵌入到WebView中,用户可以通过WebView浏览和交互H5内容。 2. **JavaScript与Java交互**:为了实现H5调用Android原生功能,如二维码扫描,需要利用`WebView`的`...

    100套实用h5页面免费模板,html5网页模板,html5网站模板,html5网页制作模板

    HTML5技术的引入不仅让网页更加美观,其对网页加载速度的优化、对移动端的友好适配,都让网站在面对越来越多的移动用户时更具优势。而语义化标签的使用,如`&lt;section&gt;`、`&lt;article&gt;`、`&lt;nav&gt;`等,不仅帮助开发者更...

    地图查找附件_微信小程序模板js代码前台前端H5页面源码.rar

    4. **H5页面适配**:源码应考虑如何在不同设备和浏览器上呈现一致的用户体验,可能使用了响应式设计或者自适应布局。 5. **地理定位**:利用浏览器或微信提供的地理定位接口,获取用户的当前位置。 6. **数据管理*...

    手势解锁密码_微信小程序模板js代码前台前端H5页面源码.rar

    这个压缩包文件包含了一个微信小程序模板,用于实现手势解锁功能的JS代码,以及对应的前端H5页面源码。以下是关于这个主题的详细知识点: 1. **手势解锁原理**:手势解锁通过用户在预设的点阵上绘制特定的路径作为...

    机器人兔兔_微信小程序模板js代码前台前端H5页面源码.rar

    "机器人兔兔_微信小程序模板js代码前台前端H5页面源码.rar" 这个标题表明我们正在处理一个关于微信小程序的项目,项目名为“机器人兔兔”。这个项目提供了一套JavaScript(js)代码作为前端模板,用于构建微信小程序...

    h5小游戏源码

    本压缩包提供了一个简单的H5小游戏源码,包含所有必要的源文件,便于开发者学习、调试或进行二次开发。 1. HTML5基础 HTML5是超文本标记语言的最新版本,它引入了许多新特性以增强网页的交互性和多媒体支持。在H5...

    H5 PhotoSwipe简单例子 vue图片拉伸放大缩放例子

    **标题解析:** "H5 PhotoSwipe简单例子 - vue图片拉伸放大缩放例子" 这个标题表明我们要探讨的是一个使用H5技术,并结合...这个例子对于学习Vue与外部库的集成,以及提升移动端H5页面的用户体验具有很高的参考价值。

    H5 仿阿里自适应页面

    6. **字体适配**:通过设置`font-size`基于视口宽度的百分比,确保字体在不同设备上看起来舒适且比例协调。 7. **JavaScript库和框架**:可能使用如Bootstrap、Vue.js等前端框架,它们内置了响应式设计的组件和工具...

    框架_企业城微信小程序js代码前台前端H5页面源码.rar

    "框架_企业城微信小程序js代码前台前端H5页面源码.rar" 这个标题表明我们正在处理一个压缩包,其中包含了用于构建企业城微信小程序的前端源代码。这里的“框架”可能是指开发小程序所采用的特定框架,如微信小程序...

    H5 Video标签调用摄像头进行录像,兼容苹果、安卓系统、可在微信浏览器正常使用

    // 设置一段时间后停止录制,如:30秒 setTimeout(() =&gt; mediaRecorder.stop(), 30000); } function saveOrUploadVideo(blob) { // 这里可以将blob数据转换为URL,然后创建一个a标签下载,或者通过Ajax等方式...

    h5打开微信返回问题

    这通常发生在用户在H5页面中点击某个链接,例如“分享到微信”或“使用微信登录”,然后在微信完成操作后希望返回到原来的应用。 描述中的“ios打开微信返回app”进一步指出了这个问题的核心:当iOS设备上的H5页面...

    H5移动端,富文本编辑器 wangEditor

    移动端富文本编辑器,非常好用,后台配置也简单。按照wangEditor官网的配置教程就可以。移动端富文本编辑器,非常好用,后台配置也简单。按照wangEditor官网的配置教程就可以。移动端富文本编辑器,非常好用,后台...

Global site tag (gtag.js) - Google Analytics