I’m getting different results between the Firefox, Chrome web dev tools and my actual phone. It looks fine on the Firefox and Chrome simulators for my phone’s supposed dimensions, but not on my actual phone. Can someone shed some light on why they’re different?
I don’t know how accurate those things are, especially when filtered through codepen.
Is there a particular tool I can use that is considered trustworthy in giving accurate reflections of what would be seen on different devices?
I’m not really sure - someone else can pipe in here if they know something I don’t know. But I do know that I wouldn’t do it through codepen, except for teaching purposes. It might be doing some adjustments on its own.
If you want to see how a device looks on a phone, I might build locally and check in the browser simulators. To be 100% sure, I’d either find a way to run your local site on the phone (I’m assuming there is a way to do this) or deploy the app and open it on your phone - that is the way to be 100% sure. But if you’re still doing codepen, I wouldn’t worry about this too much at this point - I mean, it’s a good thing to be thinking about but I also wouldn’t obsess over it.
Browserstack is the standard… Can view on various real devices… Might need a paid subscription though
If you are just testing responsiveness then you don’t really need any tools to do this. If you are using a desktop (or laptop) then you can just adjust the width/height of your browser to test for a wide variety of width/height combinations. My firefox narrows to about 435px, which is pretty dang narrow for a web page. At that width you are most likely using a single column layout anyway so responsiveness shouldn’t be too much of an issue. But if you do need to test for very narrow widths then you can use your browser’s responsive design mode to do that.
The difference in the two pics you posted is the height of the view port. The top one has got a ton of height while the bottom one isn’t tall enough to display the content + arrow. This isn’t an issue with browsers, devices, or tools. This is an issue with the styling of your scrolling feature. You haven’t taken into account what to do when the height of the view port isn’t tall enough to display the content + arrow.
My recommendation would be to initially style them without the scrolling effect and test that your styling works on all ranges of height (just make your browser really short, then medium height, then very tall). After you have it working the way you want then you can add the scroll.
I played around with your code in chrome dev tools - the issue isn’t device specific it’s the code you’ve written that is causing the issues,
Do the following to fix it:
#text
position: absolute
padding: 50px 0;
#about-blurb
margin-right and margin-left
padding: 0 50px;
position: sticky - this does the same as position: fixed but keeps your element within the flow of the document#welcome-section
height: 100vh;Make sure that your media queries aren’t resetting these values at different screen widths.
Use absolute positioning only on small elements, e.g. a small button or icon that you want to position in a particular spot relative to another relatively positioned element but not have its position affect the position of any other elements on the page. Don’t use it for general layouts it’s not required for that use and it will cause you problems with responsiveness.
Avoid giving elements fixed heights where possible, especially if they contain text. The element will naturally grow or shrink to fit the text within it.
Most browsers tend to render stuff in the same way 99.5% of the time. Tools like browserstack are used to catch the 0.5% of edge cases between browsers by testing on real devices. You shouldn’t need to worry too much about using it.
Edit: i think you’re trying to achieve animating the text in? in which case you should wrap the text in a containing div and give it a fixed height which is enough to contain the text when it floats down, keep the #text div to position: absolute and animate it in… you’ll need to change the size of the containing div with media queries as the font size etc change size depending on the screen size
Just to be clear, they are not simulators, they can’t simulate devices or browsers. If you want to test your code on a specific device or browser you have to run the code on that device/browser. That is how you do proper cross-browser/device testing. As already said, there are sites for that (BrowserStack only has a trial last I checked, LambdaTest has free minutes per month).
Also, when testing on Codepen I would suggest you use the Debug view and make sure you have added the viewport meta tag.
I tried the viewport meta tag in debug view with Firefox and Chrome dev tools, but it was still inconsistent with the actual devices. I think I am going to try BrowserStack or LambdaTest. I need to be able to trust what I’m seeing.
This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.
