@media (max-width: 640px) 不适用于移动设备
[英]@media (max-width: 640px) not working for mobile
问题描述
This codepen link: https://codepen.io/gianlucaas/pen/bGrmQVO hosts my code for one of my pages for a new website.
此代码codepen链接： https : codepen托管我的新网站页面之一的代码。
the problem is, when I go and test it on mobile (you can try it too, on the codepen link), it looks perfect.问题是，当我在移动设备上测试它时（你也可以在 codepen 链接上尝试），它看起来很完美。 you can see the rolex goes to the top right corner (the image) and it looks proper.你可以看到劳力士转到右上角（图像），看起来很合适。 BUT, when i go to my live link, which is (won't show now for privacy purposes).但是，当我转到我的实时链接时，这是（出于隐私目的现在不会显示）。 please see answer that solved issue below...请参阅下面解决问题的答案...
(ON MY IPHONE), it looks like the desktop application, but it is supposed to look like the phone version! （在我的 IPHONE 上），它看起来像桌面应用程序，但它应该看起来像手机版！ I cannot figure out why for the life of me.我无法弄清楚为什么我的生活。 Does anyone have any suggestions as to what I could be doing wrong?有没有人对我可能做错的事情有任何建议？
2 个解决方案
解决方案1
1 2021-11-14 20:43:53
In your codepen you've got the max-width at 640px:在您的 codepen 中，您的最大宽度为 640 像素：
@media (max-width: 640px) {
In your live app it's 440px:在您的实时应用程序中，它是 440 像素：
@media (max-width: 440px) {
解决方案2
0 已采纳 2021-11-14 20:47:28
您需要在页眉中定义视口，codepen 补充说。
<meta name="viewport" content="initial-scale=1.0, width=device-width" />
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.