分辨率更高的手机响应设计 [英] Responsive Design on mobile phones with higher resolutions

问题描述

据我了解(如果我错了，请纠正我)，现代的响应式网站将进行更改，以适应您所使用的设备的大小和类型.或者，如果窗口大小更改，则可以应用此方法.

To my understanding (correct me if I am wrong) a modern Responsive website will change to fit the size and type of device you are using. Or this can be applied if the size of the window changes.

我的问题是，为什么我的手机会像现代1080p显示器那样显示响应式站点.

My question is why does my mobile phone display a Responsive site just like how a modern 1080p monitor would display it.

基本上，我的当前显示器以30英寸的速度运行，分辨率为768p.我的手机的分辨率也为768p.

Essentially, my current monitor is running at 30" and is at a resolution of 768p. My phone also has a resolution of 768p.

许多自适应网站都使用媒体查询来基于像素宽度显示CSS文件.

Many responsive websites use media queries to display a CSS file based on the pixel width.

我的显示器和手机都不会一样吗?

Wouldn't this be the same for both my monitor and phone?

我的问题:如何根据屏幕尺寸(以英寸等为单位)而不是屏幕分辨率或像素数来使站点响应.

MY QUESTION: How can I make a site responsive based on the screen size (in inches, etc) and not the screen resolution or number of pixels.

我的响应式设计针对不同的像素宽度(媒体查询)具有3级CSS.在监视器或智能手机上查看时，它会显示最高级别(767p以上).即使实际上具有更多像素，如何使我的智能手机显示最低级别的CSS(低于480p).

My responsive design has 3 levels of CSS for different pixel widths (media-queries). When viewing on a monitor or smartphone, it displays the higher-most level (above 767p). How can I get my smartphone to display my lowest-level CSS (below 480p) even though it actually has more pixels.

推荐答案

我最近使用类似的技术创建了一个网站 http ://www.super-rod.tv/ 它针对PC和移动设备，并将响应于动态浏览器宽度调整大小. 我使用的媒体查询的最大宽度从最高到最低列出.对于1080P屏幕，它具有最佳的全屏显示效果；对于较大的屏幕(如4K屏幕)，它将以纹理背景为中心；对于分辨率较低的像素(如768P)，它将使用较小的图像集，并且也像在4K屏幕上那样居中. 如果您仅定位移动设备，则可以使用设备宽度来代替，请参见此处 width vs device-width 要强制使用最低的CSS集，您可以通过使用1000px的最大宽度(我不认为那些仍在PC上使用800x600的用户会成为您的目标?)，这会散布在所有台式机上，或者您可以使用浏览器UA告诉(为所有IE，Safari，FF，Chrome，Opera等定义，其余为移动设备).

I recently created a website using similar tech http://www.super-rod.tv/ It targets on both PC and mobile devices and will response to dynamic browser width resizing. I used media query with max-width listing from higher-most to lower. For 1080P screens it has the best full screen display and for larger ones like 4K screen it will be centered with a texture background, on lower res like 768P it uses a smaller set of images and also be centered just like on a 4K screen. If you are only targeting mobile devices, you can use device-width instead see ref here width versus device-width To force using lowest CSS set you can either by using the max-width of 1000px (I don't think those who are still using 800x600 on PC would be your target?), this would pass out all desktops, or you can use browser UA to tell (defining for all IE,Safari,FF,Chrome,Opera etc., and the rest are mobiles).

这篇关于分辨率更高的手机响应设计的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！