hello everybody I made my portfolio, it works perfectly on PC even in the mobile crhome editor, but when I actually see it on my mobile phone from some problems how come? I also entered the various meta tags
<meta name = "viewport" content = "initial-scale = 1, maximum-scale = 1">
<meta http-equiv = "X-UA-Compatible" content = "ie = edge">
my website:
http://vvportfoilio.altervista.org/
Hi there. Welcome to Free Code Camp. I notice it’s your first time posting here. To get help on this forum, you need to be specific about the problem.
Yes my problem is that I tested the responsive of my site on crhome and it works but on my phone no what can cause this problem ?? I also wrote the meta tags in the head and they are right
Including the meta tag in your HTML doesn’t guarantee mobile responsiveness of the site (though including it is absolutely necessary).
The problem could be with @media queries in your CSS. It’s difficult to diagnose the problem, as I already mentioned, if:
You haven’t provided the code( which you could provide a link to, on Codepen or GitHub) for the site.
You haven’t provided the specific problem regarding how the site is displayed on mobile devices.
this is the link to my site: http://vvportfoilio.altervista.org/
the @media queries I entered are fine … however when I open my site on my smartphone it has some problems while on crhome when the responsive text has no problem … I also noticed that this problem is only present in ios devices
You’ve set the width in the media queries. If you add the height as well, that seems to fix the problem.
but why do I only encounter problems in ios?
in the pc and on android the site is perfectly seen as in the second image
I haven’t checked on iOS. I’m on on a mac looking at it in desktop Safari. It looks the same as the iOS pic when I shrink the window.
And because browsers render differently / don’t always follow the same CSS rules. Or maybe it’s just a bug in this case idk
One of my web dev friends likes to say Safari is the new Internet Explorer (when it comes to stuff like this)
I believe it is due to this unit of measurement that I put in the css
height: 100vh;
Nope. Safari respects the 100vh.
Add height to your .avatar-center class
i added height auto but not change
You could change both the width and height to 40vw
Adding a percentage value fixes the problem in Safari, but then messes up the proportion in other browsers
