I am working on a website, I need it to support in all resolutions till 4k and all browsers. For the same requirement, I have been using chrome developer mode, and have been testing my page in all resolutions.
But my page is looking different in actual screen of the same resolution than the developer mode with that resolution.
Can any one please suggest what could be issue?
well.. when when I tried to test other websites on google chrome developer tool for responsive compatibility, I found that it was showing different result for other website only.Perhaps I am not using it correctly, would appreciate greatly if anyone help with it.
try using something like the window resizer extension for a more accurate representation of how your webpage will look on certain screen sizes. Chrome is not always the most accurate.
Related
I'm a novice at HTML and CSS and I launched a simple responsive website with only one page, but then I managed to add a couple of pages more to it after a few days. Everything looks good on desktop and when I make it smaller to 350px width via developer tools, it actually looks good as it should and all responsive.
Link: https://transporte.capital/
However, when I enter it from my mobile phone it looks horrible as CSS becomes almost inexistent. The logo becomes a link with underlines, the tweet widget is still there (I disabled it via display: none; in media queries because it takes too long to load), the social media section is distorted, all images are huge, and so on.
Is there something wrong with my mobile phone? I tried to look for cache in Site Settings - Data Stored in Chrome, but there was nothing for my website there.
Now I tried the Opera browser and the website looks good as it should. What should I do to make it update on Chrome? And will it update as it should the next time I make changes to it? Thank you!
screenshot 1
screenshot 2
I could see the page properly in my Android mobile Chrome browser. Please clear cookies once and ensure the zoom in is not enabled. Attached is my screenshot. Screen size: 393x719px
I just made published my website and noticed that the font does not appear the same on mobile and on desktop. The weird thing is that some of the text on mobile is in the correct font, while some of it is not. Can anyone help? Thanks in advance.
Edit: For clarification, my site looks fine when I inspect it (on my laptop) and use Chrome's tool to mimic different mobile displays. However, when I open the site on my phone, some of the styling doesn't look the same.
Dario try linking it with Google fonts if it's available on the Google site. It should work universally on most devices whether or not the font is installed on the users computer.
I'm not sure how to ask what I need to ask, so please bear with me. I'm using Chrome to view my website in iPad mode, and I'm simultaneously viewing the site in my iPad. The changes I make to the sight are shown in Chrome but not in my iPad. Is there a reason for this?
Well, is there any url to look that? There might be a couple of reasons. Screenshot or steps to reproduce the issue might be better to debug?
I have been trying to make a responsive website for mobile devices . I have found two ways to test responsive design:
By resizing the window
Using Google Chrome developer's tools
In both of them I get a different view. Which one gives me the right view, as I use font-size and padding in 'em'.
Resizing browser window is not Responsive. While developing Responsive applications the easiest, but yet not perfect, way is using Chrome's Developer tools. Even that may give you different results, because mobile device screens are using not just width/height but also dpi. So 320 iphone6s screen is not going to be perfect match for 320px resized browser or equivalent android device.
Go for chrome developer tools. It's a great way of checking responsiveness. It comes with dimensions of popular mobile and tablet devices. So you can check for a variety of device at once.
Simply resizing the browser is not a right way of checking responsiveness.
Recently I built a page that works fine with both the ways you mentioned. You can check it here.
Let me know if you need any help.
I would say Chrome Dev Tools is the best bet for a local snapshot.
However, if you have access to one or more mobile devices you may want to launch the site on Heroku or another production environment and view it from the actual device.
An iPhone 6 for example, I find Chrome does not take into account the address bar or bottom nav in safari so things can be slightly off from the Chrome Dev view of iPhone 6.
I need to test an html file for mobile responsiveness, but all the resources I have found to do this need a URL or a localhost, is there any way to test responsiveness with just an html file?
Yes, simply open the .html file with Chrome or Firefox. These browsers have device mode.
You can change the screen size and see how it looks on mobile or tablet sized screens.
If you save your file .html you can open with firefox or chrome, but i suggest you to use firefox developer edition https://www.mozilla.org/it/firefox/developer/
If you use Firefox you can put in the menu -> development -> flexible display (ctrl+shift+m)
In Chrome (ctrl+maiusc+i + emulation)
In this page you can select the device to view.
You have a lot of options to test it, but each option has it's benefits.
You can minimize the browser!
You can use device mode from chrome,mozilla etc
You can find a lot of online responsive site testers for any resolution you want
In my opinion, the best way to test responsiveness is in Chrome. Right click on the page and inspect. Then there will be a button to turn on responsive testing. You can choose the device to see how your page will render on all kinds of devices. This is better than resizing your window because there are slight differences in how pages render on different tablets and phones.
There is nothing like using a real phone. As an example, px sizes differ between various phones and can cause troubles. The height of the URL bar comes into play in vertical flex scrolling when the display occupies 100%.
To do this kind of testing, you can use tunneling - products like https://serveo.net/ or ngrok.
I use http://www.responsinator.com
Very easy and complete, several types of mobile and table devices.