I've noticed a small issue in that when the page loads, using IE8, the main top navigation, using Bootstrap 3.1.1, starts off collapsed and then when the page has finished loading the main top navigation resizes to full width, i.e. normal size. This creates a bit of a jump on the page, which isn't ideal. It is particularly apparent on slow connections and only appears to occur in IE8. Any ideas or anyway to smooth it out somehow?
I'm including all the usual bits:
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="initial-scale=1.0, width=device-width">
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<script src="~/scripts/html5shiv.min.js"></script>
<script src="~/scripts/respond.min.js"></script>
Sorry I can't add this as a comment because I don't have enough rep...
What is the order you are laying out your conditional comments? You should be loading your CSS and the rest of the script before you do the IE8 conditionals.
If that's all correct, then Paul Spranger's solution might work for you (ref: http://www.paulsprangers.com/2011/09/remove-respond-js-screen-flicker/). Seems like it might be directly related to respond.js.
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 have a blog website where I used the viewport property to scale the site in mobiles, it was working perfectly using:
<meta name="viewport" />
Then it stopped working for no reason, didn't touch the code at all. Now I've been trying with everything I find online, from max-width to initial-scale, etc. Still doesn't work.
What could be happening? Is there any update that cancelled the viewport property?
My website: www.fake-leather.com
If you are not coding a responsive site, just don’t use any meta viewport. If you are coding a responsive website, all you need to write is
<meta name="viewport" content="width=device-width, initial-scale=1">
Any additional parameters in the content attribute usually screw up user’s experience.
Reference: Stop using the viewport meta tag (until you know how to use it)
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'm in the process of developping a Web Application for mobiles. I
went with web applications because to me it seems a winning situation
having to develop one application that could run also on iPhone /
Windows Mobile / Palm etc.
I started testing today after a few days of doing concepts, ideas and
designs and what I wanted to do was have a menu that sticks at the
bottom of the page. Exactly like the menu on the bottom in this iPhone
application screenshot :
Using CSS, I though it would be really easy to do this. Only using
position:fixed; bottom:0; would have done the trick but I have found
it doesn't behave the same on mobile browsers
I tried to split my page in 2 sections : 1 would be a scrollable div
(for the content) and the other one would be the bottom menu.
Scrollable divs also do not work on Android. I also tried using frames
with no luck either. Does anyone know of any way to re-create a menu
that would stick to the bottom of a page for mobile phones?
On my Android N1 with CyanogenMod i had this trouble too and the fix:
<meta
name="viewport"
content="width=100%,
initial-scale=1,
maximum-scale=1,
minimum-scale=1,
user-scalable=no"/>
Specifically the user-scalable=no; part, you can also put 0 instead of no.
Interestingly this breaks androids rendering of buttons, but all you have to do is set a background color to buttons.
Just add:
<meta name="viewport" content="width=device-width, user-scalable=no" />
to the page and you're set for Android 2.2+. This worked on a page I was testing on my phone. Source: When can I use CSS position:fixed?
This is supposed to work :)
http://doctyper.com/archives/200808/fixed-positioning-on-mobile-safari/
Just got an upgrade to Android 2.2 (Froyo) on my HTC Desire, and I'm happy to say that position fixed now works, at least when you use the viewport meta tag to set initial-scale and width. Still doesn't seem to work on regular web pages though.
I confirm that using the meta name in your html header
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
you'll have a fixed div on scrolling vertical and horizontal on Android 2.2, 2.3 and up
and iOS 4 and up.
I made an example here:
https://dl.dropbox.com/u/908148/website/test-scroll.html
I have a website that works fine with safari. As per the requirement I want to make this site accessible through iPhone properly. How can I do this? I'm new to iPhone.
If you give me a example of normal web page source code and its converted code(after making change) for iphone then it will be very helpful for me.
I tried iui library but when I attached its files to my web page it displays nothing. I don't know what to do. Can someone point me in the right direction, or give me a complete example?
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"/>
<link rel="apple-touch-icon" href="../iui/iui-logo-touch-icon.png" />
<meta name="apple-touch-fullscreen" content="YES" />
<style type="text/css" media="screen">#import "../iui/iui.css";</style>
<script type="application/x-javascript" src="../iui/iui.js"></script>
Since you're new to iPhone, Start by reading some basic documentation on the topic.
Then, you can take advantage of Safari's iPhone meta tags to make the page look the way you want.
You can use WebKit for your devlopment.