`
chenfeng_lian
  • 浏览: 9452 次
  • 性别: 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>

 

分享到:
评论

相关推荐

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

    由于H5页面在使用bootstrap的自适应导致从高度上总是自动排列,导致登录框不能自动居中。项目中发现一个动态居中办法,很好用,可以让Bootstrap登录框自适应水平居中、垂直居中。

    vue写h5页面的方法总结

    下面就是小编带给大家的如何用vue写h5页面方法操作,希望能够给你们带来一定的帮助,谢谢大家的观看。 1、当拿到设计师给的UI设计图,前端的首要任务就是布局和样式,相信这对于大部分前端工程师来说已经不是什么...

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

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

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

    宇航员404丢失单页面HTML5,自动视频各种型号设备

    h5rem自适应框架

    移动端h5页面rem适配

    HTML-移动端APP注册登录页面模板

    HTML移动端APP注册登录页面模板,全套模板,包括首页、注册、登录、密码修改等多个手机WAP模板页面。

    Html5适配iphoneX刘海屏的简单实现

    iphonex的刘海屏且不说好看不好看,但是确实给开发造成一定困扰,有些PM希望产品能够全屏展示,于是客户端就把刘海以上的空间让出来让前端处理,造成一个问题就是当页面头部固定在顶部时,如果上下滑动页面会有较大...

    百度地图毕业设计源码-WebViewLoadH5:H5最大的优势是跨平台,开发者无需太多的适配工作,用户无需下载,打开一个网址即可,就能访问了

    H5页面不足的地方表现在软件运行速度容易受网络影响,对于摄像头、陀螺仪等硬件支持较差,开发出来的应用性能较差,不适合处理较复杂的逻辑等等。 H5的优势: 1、页面丰硕简练。H5技巧完成的网站也等于常说的相应式...

    js 简易版滚动条实例(适用于移动端H5开发)

    下面小编就为大家带来一篇js 简易版滚动条实例(适用于移动端H5开发)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧

    vue-webapp-h5-template:Vue2.0 (Vue3.0 + TypeScript) + Lass + Vant + viewportrem 完整的移动端适配方案案例代码

    因为接下来有个 H5 的页面要开发,虽说是 H5,但整体比较偏向 WebApp 形式。为了方便接下来的开发工作,于是就花了 3 - 4 天简单的封装了一套适用于项目的架子,并且将过程记录了下来,希望能与大家一起进步。 ...

    详解H5 活动页之移动端 REM 布局适配方法

    简单来说,即所有宽高像素与视觉稿输出相同,然后通过页面宽度与视觉稿的宽度比率,动态设置 viewport。缩放方案核心代码参考: (function () { var docEl = document.documentElement; var isMobile = win

    html5实现输入框fixed定位在屏幕最底部兼容性

    做h5 已经有很长一段时间了,现在做的工作h5比pc上的更多,曾经解决pc端IE各个版本的兼容性也是伤透脑筋,原以为h5的会更好,殊不知,还有更头疼的问题,当设计师要设计一个聊天窗口,把输入框定位在最底部,这是再...

    工程硕士学位论文 基于Android+HTML5的移动Web项目高效开发探究

    (3)针对页面自适应问题,本文结合渐进增强以及拥抱流式布局的思想,同时研究利用了移动设备的视口特性,实现跨分辨率、跨设备的页面自适应。 (4)针对系统的功能实现问题,通过结合利用原生态框架与HTML5的跨平台...

    使用vue完成微信公众号网页小记(推荐)

    公司最近有一个H5页面的功能,比较简单的一个调查表功能,嵌套在我们微信公众号里面。选用的技术栈是Vue。同时用到了微信的登录和分享接口。ps:本人小白,如果有问题希望大家能指出来,写文章不止是为了记录,还是...

    taro-usage-sample:Taro统一多端开发框架的使用示例,支持小程序和H5

    本来是想简单写个taro的demo,同时适配一下H5和小程序。看了文档中的组件和API后决定按照文档的使用说明一步步集成所有相关功能,使demo更加丰富,可以完全作为文档学习的参照,同时也可以不断印证文档中的内容,...

    vue-vant-axios.zip

    基于vue+vantui+vue-router+axios+vuex的移动端h5电商项目, 含有基本的页面, 简单可靠代码易懂, 初学者用来练习最为合适。其中, 引入移动端适配方案 rem, 使用 css 处理器 scss, 封装 axios。

    vue悬浮可拖拽悬浮按钮的实例代码

    使用,基于vue-cli3.0+webpack 4+vant ui + sass+ rem适配方案+axios封装,构建手机端模板脚手架 vue-h5-template 后续将发布各种商城组件组件,让商城简单高效开发   线上体验   使用 将 src/components文件夹...

    优惠卷网站模板

    这个一个优惠卷网站首页模板,页面美观,适配多种分辨率下的展示,可二次定制,开发代码结构非常清晰,不管是用于学习,还是实际项目都非常具有参考和借鉴意义。甚至可以在原来模板的基础上经过简单修改即可成为自己...

    webapp字号大小跟随系统字号大小缩放的示例代码

    最近做了一个webapp项目,混合式开发,外部原生,内部webview嵌套H5页面。前端方面采用了vue开发,适配采用的是flexible+rem做的适配。本来一切都很好,可是吧,领导说客户有的年纪大 ,看不清字体,希望网页字体...

    35_简单选择器.wmv

    CSS3是最新的CSS标准,在网页制作中,当下最流行的组合就是h5+css3,CSS3的使用最直接的好处就是页面展示上更加炫酷,表现形式更加多元化,但它的好处远远不止这些。使用CSS3不仅有利于开发与维护,还能提高网站的...

Global site tag (gtag.js) - Google Analytics