how to get window width in javascript

how to get window width in js

How to Detect Screen Resolution with JavaScript

window

https://developer.mozilla.org/en-US/docs/Web/API/window/innerWidth

https://www.w3schools.com/jsref/prop_win_innerheight.asp

function innerFunction() {
var w = window.innerWidth;
var h = window.innerHeight;
document.getElementById("demo").innerHTML = "Width: " + w + "<br>Height: " + h;
} function outerFunction() {
var w = window.outerWidth;
var h = window.outerHeight;
document.getElementById("demo").innerHTML = "Width: " + w + "<br>Height: " + h;
}

screen

https://stackoverflow.com/questions/3437786/get-the-size-of-the-screen-current-web-page-and-browser-window


window.screen.height;
window.screen.width;

viewport size / device size / document size

https://ryanve.com/lab/dimensions/


responsive viewport / viewbox

svg viewbox

small screen

const svgStr = `
<svg data-uuid="live_map_svg" id="live_map_svg" width="100%" height="100%" viewBox="0 0 1000 1000" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"></svg>
`; body.insertAdjacentHTML(`beforeend`, svgStr.trim());


https://www.tutorialrepublic.com/faq/how-to-detect-screen-resolution-with-javascript.php

https://usefulangle.com/post/190/javascript-window-width-height


how to get window width in javascript的更多相关文章

  1. $(window).width() is not a function

    昨天在帮同事调试JS的时候,FF报错了,$(window).width() is not a function.我以前也是这么用的,都没问题,为什么现在就报错了呢? 这是因为jQuery用" ...

  2. JavaScript window.open()属性

    一. Window 对象 Window 对象是 JavaScript 层级中的顶层对象. Window 对象代表一个浏览器窗口或一个框架. Window 对象会在 <body> 或 < ...

  3. JavaScript—window对象使用

    window对象是JavaScript浏览器对象模型中的顶层对象,包含多个常用方法和属性: 1. 打开新窗口 window.open(pageURL,name,parameters) 其中:pageU ...

  4. JavaScript权威指南--window对象

    知识要点 window对象及其客户端javascript所扮演的核心角色:它是客户端javascript程序的全局对象.本章介绍window对象的属性和方法,这些属性定义了不同的API,但是只有一部分 ...

  5. JavaScript浏览器对象模型(BOM)之window对象

    一.BOM概述 BOM(Browser Object Model)浏览器对象模型,它提供了很多对象,用于访问浏览器的功能. BOM 缺少规范,每个浏览器提供商又按照自己想法去扩展它,那么浏览器共有对象 ...

  6. javascript之Window 对象

    一.说明:他是JS中最大的对象,它描述的是一个浏览器窗口,一般要引用他的属性和方法时,不需要用“Window.XXX”这种形式,而是直接使用“XXX”.一个框架页面也是一个窗口. 二.Window窗口 ...

  7. JavaScript (JS)基础:BOM 浅析 (含window对象相关基本方法、属性解析)

    ① window对象(Math方法也属于window对象): window对象是JavaScript中的顶级对象,所有定义在全局作用域中的变量.函数都会变成window对象的属性和方法,window对 ...

  8. jQuery,javascript获得网页的高度和宽度$(document).height / $(window).height

    一.javascript 网页可见区域宽: document.body.clientWidth 网页可见区域高: document.body.clientHeight 网页可见区域宽: documen ...

  9. JavaScript window

    window -- window对象是BOM中所有对象的核心 window,中文"窗口" window对象除了是BOM中所有对象的父对象外,还包含一些窗口控制函数 全局的windo ...

随机推荐

  1. Linux命令——netcat

    简介 netcat的简写是nc,被设计为一个简单.可靠的网络工具,主要作用如下: 1 实现任意TCP/UDP端口的侦听,nc可以作为server以TCP或UDP方式侦听指定端口 2 端口的扫描,nc可 ...

  2. vuex有哪几种属性

    有五种,分别是 State. Getter.Mutation .Action. Modulestate => 基本数据(数据源存放地)getters => 从基本数据派生出来的数据muta ...

  3. Http系列:断点续传与多线程下载

    前言 当下载电影时,我常常会想中断下载后,为什么点击开始时会在中断的地方继续下载呢?又或者在看在线电影时,为什么可以按着播放条拖动就能看到想看的片段呢? http的range请求将解决以上困惑. 多线 ...

  4. Map转换为格式化的YAML字符串

    yaml与java对象的互转 yaml与java对象的互转有snakeyaml <dependency> <groupId>org.yaml</groupId> & ...

  5. nodejs如何下载指定版本

    浏览了一下nodejs的官网,但是官网没有下载低版本的下载地址,所以找了一个可以下载指定版本node的下载地址https://nodejs.org/download/release/v8.9.4/

  6. ShowDoc,APIDoc,可道云API,语雀-适合IT企业的文档工具

    ShowDoc,APIDoc,可道云API,语雀-适合IT企业的文档工具 一.ShowDoc官方文档及说明 1.1 它可以用来做什么 1.2 它都有些什么功能 1.3 使用在线的ShowDoc 1.4 ...

  7. linux系统资源限制———ulimit命令

    简介 Linux ulimit命令用于控制shell程序的资源. ulimit为shell内建指令,可用来控制shell执行程序的资源 推荐:https://blog.csdn.net/skiwnc/ ...

  8. (31)grep命令详解:查找文件内容

    1.grep命令用于不需要列出文件的全部内容,而是从文件中找到包含指定信息的那些行. grep命令能够在一个或多个文件中,搜索某一特定的字符模式(也就是正则表达式),此模式可以是单一的字符.字符串.单 ...

  9. dedecms织梦搜索页错乱的解决方法

    在使用DEDE程序所架设的网站时,使用搜索结果页展示的问题上,由于font样式飘红问题,导致页面错乱,今天来解决这个问题. 织梦程序的搜索结果原理很简单,利用font加入颜色样式赋予搜索结果,所以显示 ...

  10. 小白搭建WAMP详细教程---apache安装与设置

    一.apache官网下载Apache HTTP Server服务器 1.打开apache官网http://www.apache.org/,拉到最底下,找到HTTP Server,点击进去下载.也可以直 ...