三星Galaxy S4响应式设计@media [英] Samsung Galaxy S4 Responsive Design @media

问题描述

我一直在其上沿会很大和测试正常的所有​​设备，我可以得到我的手......直到我在Chrome上一个三星Galaxy S4移动版查看的项目完全响应式设计。 ..看来，默认媒体报道为1920x1080，导致我的布局，以相同的方式加载，如果我宽屏桌面上。当然，一切都还在使用，但它太小了。为了解决这个问题，你只需要确保使用视口标签在你的文档的头部如下...（我以前不因为一切都没有它工作正常有这个）

I have been working on a fully responsive design which was going along great and tested properly on all the devices I could get my hands on... Until I viewed the project in the mobile version of Chrome on a Samsung Galaxy S4... It appears that the default media report is 1920x1080 which causes my layout to load the same way as if on my widescreen desktop. Granted, everything is still usable, but it is TINY. To solve this you need only make sure to use the viewport tag in the head of your document as follows... (I didn't have this before because everything was working fine without it)

<meta name="viewport" content="width=device-width,maximum-scale=1.0,minimum-scale=1.0">

和CSS文件中使用正则媒体查询如下...

and in your CSS file use regular media query as follows...

@media screen and (max-device-width: 360px) { }

我可能会关闭我的640x360像素的测量，但它似乎是工作，现在一切都在大屏幕S4上，而相应地调整......任何人都可以添加到这个，使之更准确的为这个屏幕尺寸？谢谢

I may be off in my 360px measurement but it appears to be working and now everything is large on the S4 screen while adjusting accordingly... Can anyone add to this to make it more exact for this screen size? Thanks

推荐答案

我有一个银河S4，我觉得像设备宽度它击中的是略高于400像素。试着改变你的媒体查询：

I have a Galaxy S4 and I feel like the device width it hits at is a little over 400px. Try changing your media query to:

@media screen and (max-width: 480px) { }

，看看它看起来没有更好的手机上。此外，这是我通常使用的视口：

and see if it looks any better on your mobile phone. Also, this is the viewport I typically use:

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />

希望工程为你！

这篇关于三星Galaxy S4响应式设计@media的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！