Chrome and Firefox, same page, same CSS, with normalize.css, render differently.
It started out as a select box being a few pixels short in Firefox. I've since traced it to two issues:
Firefox renders responsive elements(rem', em) as integers. `80 in CSS is 2em on the page.
Firefox renders borders differently than Chrome.
Is there a way to have render pages the same?
Please go through YUI, i think this would turn your pages run out of font rendering issues, and also try adding meta tag within <head> tag
<meta name="viewport" content="width=device-width, initial-scale=1">
here are the other references i would like you to refer, if the problem persists http://meyerweb.com/eric/tools/css/reset/
http://developer.yahoo.com/yui/reset/
Related
I read this article https://css-tricks.com/snippets/html/responsive-meta-tag/ and followed tips by W3Schools, but I'm still confused with initial-scale=1.0.
I don't see the difference between this:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
and this:
<meta name="viewport" content="width=device-width">
I tested these code snippets in many browsers, and I cannot determine which one I need to use. If I omit initial-scale=1.0 will browsers somehow add it for me? It looks they will.
The "initial-scale=1.0" part sets the initial zoom level when the page is first loaded by the browser. "width=device-width" sets the width of the page to follow the screen-width of the device, depending on what they are using.
Here is a good link to read up on it:
https://www.w3schools.com/css/css_rwd_viewport.asp
"On high dpi screens, pages with initial-scale=1 will effectively be zoomed by browsers. Their text will be smooth and crisp, but their bitmap images will probably not take advantage of the full screen resolution. To get sharper images on these screens, web developers may want to design images – or whole layouts – at a higher scale than their final size and then scale them down using CSS or viewport properties. This is consistent with the CSS 2.1 specification, which says:" - MDN ,
https://developer.mozilla.org/en/docs/Mozilla/Mobile/Viewport_meta_tag
I did use initial-scale=1, but I noticed that removing it - against recommendations on CSS Tricks and by the authors of UIkit (v2) - gave me a perfect, as-expected, initial scaling on page load using Chrome on Android and with the Silk browser on a Kindle. Including initial-scale=1 meant the pages were loading at some semi-random zoom level, which looked amateurish. Edge, Chrome and Firefox desktop browsers are fine, but I haven't tested more widely on mobile devices yet.
For Android, I'm leaving initial-scale=1 off and I'll need a very good reason to put it back on again.
<meta name='viewport' content='width=device-width'>
CSS tricks actually uses the above on its own (very fine) site
Just use initial-scale=1.0
You would see the difference when viewing your website on different mobile devices.
For example the page being a way larger width of the screen and you have a horizontal scrollbar. You may think use overflow-x: hidden but no just set the initial scale to 1 for all devices in the head
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
I am testing out Bootstrap responsiveness navbar and I have a demo website. When I resize the browser on a desktop, it all works fine including the nav bar which become collapsible menu with a small icon on the top which I can click to see more menu buttons.
But when I tried it from a mobile browser (I tried it on chrome and internet browser on an Android), I didn't see the responsive design. I could only see very small version of desktop like website.
Could anyone point out what I am doing wrong?
Add this to your HTML head..
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
This tells smaller device browsers how to scale the page. You can read more about this here: https://developer.apple.com/library/content/documentation/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html
as suggested here http://webdesign.tutsplus.com/tutorials/htmlcss-tutorials/quick-tip-dont-forget-the-viewport-meta-tag/
<meta name="viewport" content="initial-scale=1">
would be an even better choice as it makes going from portrait to landscape and back a much more pleasant user experience as with/height would adopt naturally because of the possible auto-scaling.
Adding this for people searching this error for whom the accepted answer is not working. I believe this will be a rarer, but nonetheless frustrating case:
If your page is rendering inside a frameset (for example domain cloaking), then putting the meta tags won't help. You would need to put them in the page on the cloaking domain, which you may or may not have access to depending on your DNS host.
Try clearing your browser's cache and open the page in a fresh tab. This sometimes resolves the issue for me whenever it happens.
I have a website which displays fine on all browsers (even lower versions of IE than IE10). But, on IE10, the images are having rendering issues like the screenshot attached below. If would have random colored bars on it at random times, but once refreshed it would be okay. I don't have any Javascripts on the page, just the styling to display the images. Any ideas? I tried googling and on StackOverflow but no luck. Do I need to put some sort of meta tags?
Check about "Compatibility View" Option.
and why don't you try the edge meta tag?
<meta http-equiv="X-UA-Compatible" content="IE=edge">
Is there any way to restrict the user to zoom in/out on a webpage, on laptop/desktop
I tried working out the below code:
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0,
minimum-scale=1.0, maximum-scale=1.0">
That works fine on mobile but fails on laptop/desktop.
The viewport meta tag doesn't affect desktop browsers. It is purely for targeting mobile browsers.
You can use the following CSS to try and prevent text zooming in desktop browsers:
<style type="text/css">
-webkit-text-size-adjust:none;
-ms-text-size-adjust:none;
-moz-text-size-adjust:none;
text-size-adjust:none;
</style>
However, this is experimental only and widely unsupported; See Moz Developer Network:https://developer.mozilla.org/en-US/docs/Web/CSS/text-size-adjust
Personally, I think that preventing a user from zooming in a browser will lead to awful accessibility. Some users need to zoom in to consume content on the web.
If you're interested in creating a webpage that functions correctly and is still accessible, check out the W3 accessibility guidelines: http://www.w3.org/WAI/intro/accessibility.php and check your pages with Wave:http://wave.webaim.org/
I have my site up at Isotope Labs.
It uses a mediaquery to detect mobile and set a mobile stylesheet (mobile.css) with body width of 100%.
The scripts.js file disables the jQuery scripts for mobile devices too.
It all works, except I can't seem to disable zooming on mobile devices properly.
I have used the following in my HTML head (after trying very many alternatives) to disable zooming for mobile:
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, minimum-scale=1" />
On iOS and Chrome Mobile for Android, it still allows zooming. It does apply the mobile stylesheet, but it doesn't look quite right (text appears too small).
It actually works on Android's stock browser, although every time you hit refresh it alternates between looking right, and behaving exactly like Chrome and iOS.
I've gone through and deleted everything from the head, but even if I strip out all of the javascript and CSS, it still allows zooming.
This is driving me insane. Any ideas?
You appear to be setting the meta tag in a child frame, not the root page. When viewing the full-page frame url directly, zooming is prevented.