js实现适配不同的屏幕大小

话不多说，请看代码：

// 通过js适配不同的屏幕大小
(function (doc, win) {
  var docEl = doc.documentElement,
    resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
    recalc = function () {
      var clientWidth = docEl.clientWidth;
      if (!clientWidth) return;
      // 根据设备的比例调整初始font-size大小
      if(clientWidth>640) clientWidth = 640;
      docEl.style.fontSize = 50 * (clientWidth / 320) + 'px';
    };
  if (!doc.addEventListener) return;
  win.addEventListener(resizeEvt, recalc, false);
  doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持我们！

赞 (0)

相关推荐

  • js实现屏幕自适应局部代码分享

    有小伙伴留言说需要一个js实现屏幕自适应局部的代码,这里简单整理了下,放出来给大家. 复制代码 代码如下: <!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> <style> *{ margin:0; padding:0; list-style:none; } div{ margin:0 auto; heig

  • js实现适配不同的屏幕大小

    话不多说,请看代码: // 通过js适配不同的屏幕大小 (function (doc, win) { var docEl = doc.documentElement, resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize', recalc = function () { var clientWidth = docEl.clientWidth; if (!clientWidth) return; // 根

  • Android自适应不同屏幕大小的全部方法

    Android自适应不同屏幕大小的全部方法

    本文讲述了Android自适应不同屏幕大小的全部方法.分享给大家供大家参考,具体如下: 本文将告诉你如何让你的应用程序支持各种不同屏幕大小,主要通过以下几种办法: 让你的布局能充分的自适应屏幕: 根据屏幕的配置来加载合适的UI布局: 确保正确的布局应用在正确的设备屏幕上: 提供可以根据屏幕大小自动伸缩的图片: 使用 "wrap_content" 和 "match_parent". 为了确保你的布局能够自适应各种不同屏幕大小,你应该在布局的视图中使用"wra

  • JS测试显示屏分辨率以及屏幕尺寸的方法

    如何用JS特效显示自己的屏幕分辨率以及屏幕尺寸呢?请看下面一段代码: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> &

  • 多个上传文件用js验证文件的格式和大小的方法(推荐)

    html部分: <dsp:form action="${originatingRequest.requestURI}" method="post" enctype="multipart/form-data"> <dsp:input type="file" bean="ReturngoodsFormHandler.uploadedFile1" id="uploadedFile1&q

  • Android编程实现获取标题栏、状态栏的高度、屏幕大小及模拟Home键的方法

    本文实例讲述了Android编程实现获取标题栏.状态栏的高度.屏幕大小及模拟Home键的方法.分享给大家供大家参考,具体如下: 1. 获取标题栏高度: /** * 获取标题栏的高度 * * @param activity * @return */ public int getTitleHeight(Activity activity) { Rect rect = new Rect(); Window window = activity.getWindow(); window.getDecorVi

  • javacript获取当前屏幕大小

    在使用html5在android下做开发的时候,要获取屏幕实际的大小,直接上代码,可以通过如下代码测试. 复制代码 代码如下: <html> <script> function a(){ document.write( "屏幕分辨率为:"+screen.width+"*"+screen.height +"<br />"+ "屏幕可用大小:"+screen.availWidth+"*

  • js控制元素显示在屏幕固定位置及监听屏幕高度变化的方法

    本文实例讲述了js控制元素显示在屏幕固定位置及监听屏幕高度变化的方法.分享给大家供大家参考.具体如下: //控制logo的显示位置 Begin window.addEventListener("resize", function () { // 得到屏幕尺寸 (内部/外部宽度,内部/外部高度) changeLogoPosition(); }, false); changeLogoPosition(); function changeLogoPosition() { var conten

  • JS比较两个数值的大小实例

    一般情况下: if(2 > 10) { alert("不正确!"); } 此比较不会是想要的结果:它相当于2 >1,把10的第一位取出来比较. 解决方法: if(eval(2) > eval(10)) { alert("不正确!"); } eval()函数用于在不引用任何特定对象的情况下计算代码字符串. <script> function check() { var num1=document.form1.num1.value; var

  • js 打开新页面在屏幕中间的实现方法

    <a href="javascript:void(0)" onclick="window.open('http://www.jb51.net', 'newwindow', 'height=500, width=900, top='+Math.round((window.screen.height)/2<span style="font-family: Arial, Helvetica, sans-serif;">-250</span

  • js简单实现调整网页字体大小的方法

    本文实例讲述了js简单实现调整网页字体大小的方法.分享给大家供大家参考,具体如下: //var tgs = new Array('div','td','tr'); var tgs = new Array('td','tr'); //Specify spectrum of different font sizes: //var szs = new Array( 'xx-small','x-small','small','medium','large','x-large','xx-large' );

随机推荐