首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

移动端页面按手机屏幕分辨率自动缩放的js

phoneScale+',maximum-scale ='+phoneScale +',user-scalable=no,">'); 18 } 19       做手机端页面最头疼的就是物理分辨率和逻辑分辨率的转换了...,当拿到设计图的时候,图基本都是按物理分辨率来设计的,一般常用的为640(iphone5/5s)、750(iphone6/6s),而谷歌等浏览器采用小手机模式浏览页面的时候,上面的值为逻辑分辨率,调试的时候很难把控页面样式...,在手机端的样式也会因此大乱,在页面头部加入以上一段js之后,在手机端就可以正常显示了, var phoneScale = phoneWidth/750; 除以的为设计图设计的页面宽度,750是按iphone6...来设计(根据自己使用需求来修改),即让页面的 放大比率=屏幕的逻辑分辨率/物理分辨率,从而达到适应手机的效果。...target-densitydpi=device-dpi可以强制内核以480DPI排版,使画面更精细,window.innerwidth也将为屏幕宽度1080.

5.5K80
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    【知识普及】平板的屏幕分辨率屏幕比例_和平精英平板分辨率

    针对IOS,Android 手机分辨率大小、屏幕尺寸、开发尺寸的参考。 在实际页面的开发过程,往往显示屏幕的宽度换算为像素尺寸的1/2。...x 1334 px —— 6/6s/7/8 4 英寸 —— 640 x 1136 px —— 5/5s/5c/SE 3.5英寸 —— 640 x 960 px —— 4/4s iphone各个型号屏幕分辨率总结...Android: 现今的主流手机各类及分辨率: Android 手机分辨率: 320×480 320×400 480×800 480×854(9:16) 540×960(9:16) 600...,对于几乎所有的分辨率Android123总结了大约超过20中粉笔阿女郎的大小和对应关系,对于开发Android游戏而言可以 考虑到未来的3.0以及很多平板电脑的需要。...,资源可以考虑一个强制的绝对布局保证全屏显示,而手机上的多种分辨率使用相对布局更为合理些。

    4.9K20

    屏幕分辨率dpi计算_hypodensity

    ,通过分辨率计算得出的像素密度(PPI)才是设计师要关心的问题,我们通过屏幕分辨率屏幕尺寸就能计算出屏幕的像素密度的。...和标准dpi的比例(160px/inc) 分辨率 : 横纵2个方向的像素点的数量,常见取值 480X800 ,320X480 屏幕尺寸: 屏幕对角线的长度。电脑电视同理。 屏幕比例的问题。...计算dpi    比如一个机器,屏幕4寸,分辨率480X800,他的dpi能算么。   ...图 2 3.分辨率(Resolution)   是指屏幕上垂直方向和水平方向上的像素个数。   ...比如iPhone5S的分辨率是1136*640;Samsung Note3的分辨率是1920*1080; 图 3 4.dpi   是dot per inch的缩写,就是每英寸的像素数,也叫做屏幕密度

    3.7K20

    cocos2d-js 3.0 屏幕适配方案 分辨率适应

    UNKNOWN:5 }; 参考官方说明: http://www.cocos2d-x.org/wiki/Multi_resolution_support EXACT_FIT会拉伸游戏,充满整个屏幕...,最简单最粗暴; SHOW_ALL保持游戏原比例,让一边占满屏幕,另外一侧黑边; NO_BORDER跟SHOW_ALL类似,但让短边占满屏幕,另外一侧超出屏幕,不显示黑边,一部分画面在屏幕外,无法显示;...FIXED_WIDTH和FIXED_HEIGHT都是NO_BORDER的升级版,指定那一侧充满屏幕,另外一侧超出屏幕。...而屏幕上方则使用cc.director.getVisibleSize().height - 20类似的方式来布局。 这里的20也会随着整个画面的压缩比例而变小。...实际上这个尺寸并不是真实屏幕尺寸,但可以按照这个数值进行布局。 屏幕尺寸 另外cc.view.getFrameSize可以获取屏幕尺寸

    1.8K20

    屏幕分辨率修改工具SwitchResX for Mac

    SwitchResX mac版是Macos上一款屏幕分辨率修改工具,支持各种苹果电脑和黑苹果电脑,轻松修改电脑屏幕分辨率,让您的屏幕分辨率达到您满意的效果。...2、控制屏幕分辨率和方式switchresx可以完全单独处理多个屏幕,所以您可以随时获得所需的所有自由和灵活性。这是为什么?...5、在桌面上保留任何内容在任何桌面上自动更改分辨率意味着更改图标,文件夹,文档以及存储在桌面顶部的任何其他内容的位置。...除非您使用switchresx作为工作:switchresx只需保存桌面上每个项目的位置即可完成您的安排和布局,对于Finder窗口,仅适用于切换屏幕分辨率时打开的任何应用程序。...6、满足不同应用程序对分辨率的不同需求应用程序不同的应用通常在分辨率方面具有不同的需求。

    4.1K30

    iPhone屏幕分辨率及适配技术

    在iOS开发及测试中,文字和图片的机型适配是一项重要工作,这篇文章给大家介绍下常用的iPhone的屏幕分辨率相关概念及各个机型的屏幕适配技术。 屏幕适配相关概念 1....屏幕的单位是以英寸为单位,换算关系:1 inch = 2.54cm = 25.4mm。 2. 分辨率 历代iPhone的分辨率: ?...逻辑分辨率和物理分辨率 逻辑分辨率以point(pt)为单位,物理分辨率以pixel(px)为单位。 区分逻辑分别率和物理分辨率是因为在早期iPhone 3GS之前,iOS绘制图形以point为单位。...到了iPhone 4开始,苹果引入了Retina屏幕。在一定物理单位内可以显示2倍的像素。iPhone 4的屏幕物理尺寸还是3.5寸,分辨率为640 × 960,提升了4倍。...例如下图所示,iPhone3GS和iPhone4的逻辑分辨率都是320*480,也就是说两个手机机型屏幕大小是一样的,物理分辨率iPhone3GS是320*480,iPhone4是640*960,因此iPhone4

    3.7K20

    LabVIEW自适应屏幕分辨率缩放

    前言 在使用 LabVIEW进行上位机项目开发的时候软件的分辨率是根据我们所开发的电脑所决定的,但是当开发完的上位机软件运行在其他分辨率较高或者较低的电脑上时可能会出现比例不合适而导致变形。...这里提供一个子vi,再经过一些设置可以让上位机软件的前面板自动适应屏幕分辨率,这样就可以在其他的电脑上保持现有的比例运行。...://pan.baidu.com/s/1CCfQu7MBLzdYgHOrIrdfYA 提取码:7t5b 二、子vi使用方法 1、后面板右键->选择vi 2、找到刚从百度网盘下载的 “自适应屏幕分辨率....vi” 放在后面板即可 三、窗口大小设置 文件->vi属性->窗口大小->设置为当前前面板大小->使用不同分辨率显示器时保持窗口比例 四、总结 经过以上三个步骤就可以实现labview自适应屏幕分辨率缩放了

    71150

    iOS屏幕尺寸和分辨率了解

    2、iOS设备屏幕分辨率:(ppi是像素密度单位【像素/英寸】,401ppi表示每英寸上有401个像素) ?...ppi(pixel per inch)计算,以6Plus为例:   屏幕分辨率1920 x 1080,  屏幕尺寸5.5英寸(手机屏幕对角物理线的长度),   1920 x 1920 + 1080 x...2)、设计分辨率:逻辑上的屏幕大小,单位是点。我们在Interface Builder设计器中的单位和程序代码中的单位都是设计分辨率中的“点”。    ...iPhone 6 Plus和 6S Plus是最为特殊的设备,资源分辨率屏幕分辨率的比例是1.15 : 1, 而其他的设备比例是1 : 1。...不同的人群关注的分辨率也是不同的,UI设计人员主要关注的是资源分辨率,开发人员主要关注的是设计分辨率,而一般用户主要关注的屏幕分辨率。 ?

    3K20

    SwitchResX for Mac(屏幕分辨率修改工具)

    SwitchResX for Mac最新版是一款屏幕分辨率修改器,SwitchResX for Mac软件能够非常方便快速的帮助您更改Mac显示屏的分辨率。...SwitchResX for Mac(屏幕分辨率修改工具)图片SwitchResX for Mac软件功能      1、保存桌面布局以使所有内容恢复正常,跳回到特定分辨率      2、根据需要禁用或激活屏幕...,例如在翻盖中使用Macbook模式      3、将屏幕链接到特定事件,如关键快捷键,Applescript,应用程序启动等      4、创建并启用新的自定义分辨率以适应任何可用屏幕,包括内置于汽车中的屏幕...      5、将分辨率重命名为常规和有用的术语,如游戏,文档,图形,演示,电视等。      ...6、将桌面项目排列在比Apple标准设置更精细的网格上7自动记录屏幕设置的任何变化

    3.3K30

    SwitchResX for Mac(屏幕分辨率修改工具)下载

    SwitchResX for Mac是一款强大的外部显示器分辨率管理工具,适用于Mac笔记本电脑或桌面电脑。...它可以帮助用户解决许多与外部显示器分辨率相关的问题,并提供了更多的分辨率选项,使用户可以更好地适应不同的工作环境。...图片图片SwitchResX for Mac允许用户创建自定义分辨率,这可以帮助他们以最大的清晰度或支持的最高刷新率来获取更好的图像质量。...此外,SwitchResX for Mac还支持Mac上的不同缩放模式,可以通过调整缩放系数来调整外部显示器上的屏幕内容。...总结来说,SwitchResX for Mac是一款非常优秀的外部显示器分辨率管理工具,提供了丰富的功能和工具,帮助用户克服了许多与外部显示器分辨率相关的问题。

    3.2K00

    Android获取屏幕分辨率及DisplayMetrics简介

    Android 可设置为随着窗口大小调整缩放比例,但即便如此,手机程序设计人员还是必须知道手机屏幕的边界,以避免缩放造成的布局变形问题。...手机的分辨率信息是手机的一项重要信息,很好的是,Android 已经提供DisplayMetircs 类可以很方便的获取分辨率。...为显示的逻辑分辨率(文档中说了很多,看得不是很明白);width及height就为屏幕分辨率(为绝对宽度与高度),与fields中的widthPixels及heightPixels一致;scaleDensity...与分辨率无关的度量单位可以解决这一问题,Android支持下列所有单位: px(像素):屏幕上的点。 in(英寸):长度单位。 mm(毫米):长度单位。 pt(磅):1/72英寸。...dp(与密度无关的像素):一种基于屏幕密度的抽象单位。在每英寸160点的显示器上,1dp = 1px。 dip:与dp相同,多用于android/ophone示例中。

    3.8K20

    SwitchResX Mac(mac屏幕分辨率调整工具)

    SwitchResX是一款专门为Mac电脑设计的分辨率管理工具。它允许用户在Mac电脑上自定义分辨率设置,并可通过应用程序快速地在不同的显示器之间切换,以满足不同的需求和优化显示效果。...使用SwitchResX,您可以轻松地创建和保存多个分辨率配置文件,包括横向和纵向方向的分辨率、刷新率、色彩深度、旋转和镜像等常见选项。...此外,该应用程序还提供了高级选项,例如自定义分辨率曲线、增加超过MacOS所支持的最大分辨率、调整屏幕亮度、对话框缩放等等。...SwitchResX Mac(mac屏幕分辨率调整工具)图片除了自定义分辨率设置之外,SwitchResX还提供了许多其他有用的功能,包括:自动检测和设置最佳分辨率为每个显示器指定独立的分辨率配置支持键盘快捷键切换分辨率显示器控制面板...SwitchResX是Mac电脑上一款非常实用、功能强大的分辨率管理工具,可以帮助用户轻松地调整并优化显示效果,提高工作和娱乐体验。

    3K40

    css适配不同分辨率屏幕_html5判断分辨率

    教授估计这些问题百思特网让很多对手机了解不多的朋友产生困扰,所以今天就来为大家科普科普~ 一、什么是手机屏幕分辨率?...图像的显示都是由许多像素点排列组成的,手机屏幕分辨率就代表着像素个数,当用手机屏幕中横向的像素点与竖向的像素点相乘的时候,再换算出来的比值就是屏幕分辨率了。...比如720P表示屏幕有720行的像素,具体分辨率为1280*720;1080P则表示屏幕总共有1080行像素数,具体分辨率为1920*1080。 2.K “2K、4K”表示的是“视频像素的总列数”。...具体计算方式如下: 三、如何查看自己手机屏幕分辨率 如果不清楚自己手机屏幕分辨率,可以通过手动去查看,打开手机中的【设置】-【关于手机/我的手机】这个选项,然后就可以在”分辨率”那一栏看到手机屏幕分辨率参数了...四、分辨率是否越高越好? 很多朋友认为,手机屏幕分辨率越高,画面显示效果就越清晰,所以都是倾向于选择分辨率高的手机。其实关于这一点,我们可以辩证地来分析一下。

    2K10
    领券