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.
Related
Link to app
I've written the media queries to make the app responsive and they looked fine when I'm viewing them via Chrome DevTools. First screenshot is from Chrome DevTools, second is from my iPhone X:
Iphone X has a screen size of 325x812, which is the first difference.
Secondly, G Chrome Dev is an emulator, which means it only simulates what a page will look like on a specific device. It does not account for hardware and software (say which browser you're using). They use different rendering engines, so deviations are bound to occur.
I checked the URL, you are using react to make your page responsive which takes care of your application to be visualize properly on all the screen size.
You have design correctly only, you don't want your users to open desktop view in mobile.
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.
I've finished my web page with its style sheet, not sure how it didn't work on phone browser because it work on laptop browser.
It worked when I put it on free web host and then open it with phone browser, but when I put it in phone storage, none of the CSS applied
moved the CSS file (prev href='folder/style.css') to href='style.css'
also use vendor prefix (-moz-,-webkit-,-ms-)
simple solution of this problem,
first open file in laptop and inspect your website or page then use responsive button which look like mobile.
and your css isn't apply because some mobile phone features are not able to show website as like our laptop tablet or pc.
some have this type of feature like in MI mobile.
hope you understand...!
I've got a little problem with my website and ipad/iphones. A certain tag in my css causes problems and I'm unable to check if I've solved the problem. Is there a way to look at my website as if on an ipad while not actually buying an ipad. Is there something like an ipad emulator or something?
You can use web (free) services that provide such functionality. There is a lot of them. For example: http://ipadpeek.com/ or http://mobiletest.me/.
There is also a simple solution that doesn't require any further app installation.
If you're running google Chrome you can enter the developer tools by hitting F12 on a PC and Command+option+I on a Mac.
In the developer tools you have on the top left corner of the screen a mobile device emulator, which you can choose various different models of mobile devices from. not just iPad and iPhone.
Note that you have to refresh the page each time you change a device emulator. Otherwise it won't load with all the characteristics of the current emulation.
A site that we worked on that used to display on iPhone and Blackberry now shows up as blank on both. However, it does display as usual on iPad. To be clear, we never developed a specific mobile site, but it did show up as is. The site can be found at www.ambit-consulting.com. Any ideas?
I tried it on the iOS simulator which emulates iOS4.2 and it looks fine.