如何获得设备的宽度(不是视口)?

莱利·菲茨帕特里克

我正在制作我的第一个网站,我的meta标签只是定义了一个恒定的宽度,而不是采用设备宽度,因为我对 CSS 动画很感兴趣,并希望避免让它变得动态。除了需要居中的内容外,大部分内容在移动设备上看起来都不错。当我根据百分比居中时,它根据我设置的宽度(我的视口)而不是设备的宽度居中。这当然不是错误,但我想知道是否有办法让我获得设备的宽度,即使我没有将其设置为视口,所以我可以计算left属性以将其居中。有任何想法吗?谢谢!

我没有放代码是因为真的没有任何问题,这更像是一个如何操作的问题。

戈西亚

要找到您的 html 正文(设备)的当前宽度,您可以试试这个 javascript 代码 window.innerWidth;

尝试运行此代码并将窗口大小调整为不同的宽度:

function myFunction() {
  var wid = window.innerWidth;
  document.getElementById("display").innerHTML = "Width: " + wid;
}
<button onclick="myFunction()">Show</button>

<div id="display"></div>

ps:点击运行代码,然后点击整页,这样你就可以调整浏览器的大小并测试我的代码片段。它将显示当前宽度。

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

使固定宽度适合移动设备视口

来自分类Dev

如何根据设备宽度有条件地应用视口宽度?

来自分类Dev

根据设备宽度更改视口标签吗?

来自分类Dev

如何更改显示画布导航栏的视口宽度?

来自分类Dev

如何使用JavaScript检查视口是否小于特定宽度?

来自分类Dev

元视口和宽度=设备宽度与尺寸百分比

来自分类Dev

srcset和视口宽度

来自分类Dev

如何为每个设备设置正确的视口-Android PhoneGap

来自分类Dev

如何根据不同设备的视口高度提供CSS规则

来自分类Dev

如何使div视口高度,而不是CSS中的页面高度?

来自分类Dev

基于视口高度的剩余视口宽度的CSS

来自分类Dev

在宽度较小的其他设备上正确使用移动视口

来自分类Dev

iPhone6和iPhone 6 Plus的设备宽度CSS视口大小是多少

来自分类Dev

100%宽度=视口宽度。如何使它与页面正文一样宽?

来自分类Dev

100%宽度=视口宽度。如何使它与页面正文一样宽?

来自分类Dev

为什么我的视口标签在大多数移动设备上不能正确使用设备宽度(无缩放)?

来自分类Dev

根据视口宽度更改按钮文本

来自分类Dev

根据视口宽度加载jQuery

来自分类Dev

在更改div宽度时更改视口

来自分类Dev

根据视口宽度删除标题

来自分类Dev

导航栏宽度超过网页视口

来自分类Dev

基于设备的不同<meta>视口缩放?

来自分类Dev

在触摸设备上平移视口

来自分类Dev

如何动态设置视口?

来自分类Dev

Android Chrome大字体错误/缩放错误/元视图视口设备宽度不起作用

来自分类Dev

如何在移动浏览器的视口宽度和高度上居中放置元素?

来自分类Dev

如何在Webview中获取缩放的视口的宽度和高度?

来自分类Dev

如何在Play 2框架中使用phantomjs设置视口,宽度

来自分类Dev

如何基于视口宽度(css3)将标题居中

Related 相关文章

  1. 1

    使固定宽度适合移动设备视口

  2. 2

    如何根据设备宽度有条件地应用视口宽度?

  3. 3

    根据设备宽度更改视口标签吗?

  4. 4

    如何更改显示画布导航栏的视口宽度?

  5. 5

    如何使用JavaScript检查视口是否小于特定宽度?

  6. 6

    元视口和宽度=设备宽度与尺寸百分比

  7. 7

    srcset和视口宽度

  8. 8

    如何为每个设备设置正确的视口-Android PhoneGap

  9. 9

    如何根据不同设备的视口高度提供CSS规则

  10. 10

    如何使div视口高度,而不是CSS中的页面高度?

  11. 11

    基于视口高度的剩余视口宽度的CSS

  12. 12

    在宽度较小的其他设备上正确使用移动视口

  13. 13

    iPhone6和iPhone 6 Plus的设备宽度CSS视口大小是多少

  14. 14

    100%宽度=视口宽度。如何使它与页面正文一样宽?

  15. 15

    100%宽度=视口宽度。如何使它与页面正文一样宽?

  16. 16

    为什么我的视口标签在大多数移动设备上不能正确使用设备宽度(无缩放)?

  17. 17

    根据视口宽度更改按钮文本

  18. 18

    根据视口宽度加载jQuery

  19. 19

    在更改div宽度时更改视口

  20. 20

    根据视口宽度删除标题

  21. 21

    导航栏宽度超过网页视口

  22. 22

    基于设备的不同<meta>视口缩放?

  23. 23

    在触摸设备上平移视口

  24. 24

    如何动态设置视口?

  25. 25

    Android Chrome大字体错误/缩放错误/元视图视口设备宽度不起作用

  26. 26

    如何在移动浏览器的视口宽度和高度上居中放置元素?

  27. 27

    如何在Webview中获取缩放的视口的宽度和高度?

  28. 28

    如何在Play 2框架中使用phantomjs设置视口,宽度

  29. 29

    如何基于视口宽度(css3)将标题居中

热门标签

归档