webapp font-size解决问题的方案

简介: Title //-------------------------方法 - 小数点精度可能会产生误差,但几乎不会发生---------------- (function () { document.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport" />
    <title>Title</title>

    <script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>

    <script>

        //-------------------------方法 -  小数点精度可能会产生误差,但几乎不会发生----------------
        (function () {
            document.addEventListener('DOMContentLoaded', function () {
                var html = document.documentElement;
                var windowWidth = html.clientWidth;

                //如果设计搞的宽度 = 640px,设计一般用640*940
                html.style.fontSize = windowWidth / 6.4 + 'px';
                // 等价于html.style.fontSize = windowWidth / 640 * 100 + 'px';
            }, false);
        })();


        $(document).ready(function() {
            $("#bt").click(function() {
               alert("当前浏览器计算的宽度是"+$("#my_div").width()  );




            });
        });
    </script>


    <!--6.4的话就是全宽 (任何手机都能适配)-->

    <style>
        body {
            padding: 0rem; margin: 0rem;
        }

        div { width: 6.4rem;  height:1rem; background-color: greenyellow}
    </style>



    <!------------------一般写法写法  -----------------

   
	var winW = document.documentElement.clientWidth;
	var desW = 640;
	var fontSize = 100;
	var rem = desW/fontSize;
        if(winW>desW){//但前屏幕大于640,就不需要适配了320/  640/100 = 6.4   
            winW=desW;
    	}
	document.documentElement.style.fontSize = winW/rem+"px";
</head> <body> <button id= "bt" >ok </button> <div id= "my_div" >适配 </div> </body> </html>

目录
相关文章
|
编解码 Android开发 iOS开发
|
移动开发 JavaScript 前端开发
用开发本地tcpip程序的思路开发webapp
本文关键字:the headless cms,b/s web to c/s web, headless webapp backend.
475 0
用开发本地tcpip程序的思路开发webapp
|
Web App开发 监控 Serverless
十分钟上线-基于函数计算开发 Restful web api & asp.net core web app
.NET Core是一个开源通用的开发框架,支持跨平台, 阿里云函数计算推出了 dotnetcore2.1 runtime, 使用 C# 编写 serverless 函数, 除了很好地支持通常意义上的函数外, 还可以基于函数计算开发 asp.
5760 0
|
Web App开发 JavaScript 测试技术
手机端webApp开发本地调试环境搭建
背景 手机端WebApp开发阶段,用chrome devtools模拟手机设备,很多兼容性问题不能提前发现。考虑到很多同学在开发时不便经常发版,方便设备可通过ip地址直接在移动端调试,提前发现问题,且不用发版到 test/pre 环境。
1811 0
|
JavaScript Java C#
C#开发移动应用系列(2.使用WebView搭建WebApp应用)
原文:C#开发移动应用系列(2.使用WebView搭建WebApp应用) 前言 上篇文章地址:C#开发移动应用系列(1.环境搭建)   嗯..一周了 本来打算2天一更的 - - ,结果 出差了..
1362 0
|
JavaScript 前端开发 API
2018开发最快的Webapp框架--BUI交互框架
这是你看下去的动力, 我用BUI仿照QQ的手机截图做出来的一个demo, 包含QQ的常见交互, 侧滑边栏,TAB切换,侧滑列表,下拉刷新,下拉菜单,弹窗搜索等交互操作, 这几种操作很多UI框架都有, 但几种操作结合在一块, 不同方向之间的交互冲突, 不是那么简单的事情. 使用BUI耗时1天.
2100 0
|
数据采集 JavaScript 中间件
|
移动开发
【精】H5移动端webapp开发(快装app)项目案例
现代人生活品质愈来愈高,之前想要了解家居的话,必须去实体门店,现在各类app如繁花乍现,也改变了人们的生活理念。app在手,全都不愁。如是利用了HTML5+css3开发了一个快速装修移动端app,界面新颖、功能不错,利用iscroll实现页面上拉刷新、下拉加载,swiper实现区块轮播。
12161 0