The default template/project that is used for a MVC 4/5 web application re-sizes according to your screen size. If you are on a tablet or phone it will re-size the text/layout when you manually re-size the screen. Is there any easy way to just turn this off or do I have to create a new project with my own css? I would like the template to stay at a fixed width.
Mvc5 templates used bootstrap.
From bootstrap page: How to disable page responsiveness
Omit the viewport mentioned in the CSS docs. In your razor layout remove:
"<meta name="viewport" content="width=device-width, initial-scale=1.0">"
Override the width on the .container for each grid tier with a single width, for example width: 970px !important; Be sure that this comes after the default Bootstrap CSS. You can optionally avoid the !important with media queries or some selector-fu.
If using navbars, remove all navbar collapsing and expanding behavior.
For grid layouts, use .col-xs-* classes in addition to, or in place of, the medium/large ones. Don't worry, the extra-small device grid scales to all resolutions.
There is well known problem with media query width, which is not the same as viewport width in some browsers (WebKit browsers change the size of their CSS viewport when scrollbars are visible). I wanted to fix the problem by moving the vertical scrollbar from body or html to first wrapper div (as described on stackoverflow: https://stackoverflow.com/a/10091608/1647291).
The fix
Here's the fix with CSS:
body, html { overflow: hidden; height: 100%; }
div.wrapper { overflow: auto; height: 100%; }
It moves the vertical scrollbar from body or html to the first div inside body. Thanks to that you don't need to worry about viewport widht in media queries.
The problem
But unfortunately this great method has one bad side effect - on iPad (and possibly on some other platforms too) page can't be scrolled smoothly. After you stop touching the screen it stops scrolling imediately, there's no smooth and slow easing.
This simple solution with CSS is much simpler and better than all those methodes with testing the viewport with javascript. Some of them are described here but they are not reliable or make the site works very slow:
CSS media queries and JavaScript window width do not match
http://github.com/tysonmatanich/viewportSize
http://github.com/ryanve/verge
Is there any way to use this CSS fix and make the iPad scroll correctly?
It is possible you are over thinking this. We make websites all day and this is not a problem. I think that you might be worrying too much about the specific px widths. If 680px vs 693px is a big deal, you are thinking about this the wrong way. I suggest you design mobile first and make a break point whenever it gets ugly (with ems). For sites with short pages and long pages, (causing the scrollbar to appear sometimes and jump between pages when there is no scrollbar) - to just add this and call it a day. Good luck!
html { overflow-y scroll }
When I load my jQuery Mobile page on an iphone, some of the page extends out of the initial viewport. The space that is out of the initial viewport to begin with is white, not gray which it should be. I've attempted to set the height to 100% using this line of code: [data-role=page]{height: 100% !important; position:relative !important;} however this still does not do the trick.
I always have the same problem with my JQM pages. I use that to make my page height 100%:
$(document).delegate('#yourPage', 'pageshow', function () {
var the_height = ($(window).height() - $(this).find('[data-role="header"]').height() - $(this).find('[data-role="footer"]').height());
$(this).height($(window).height()).find('[data-role="content"]').height(the_height);
});
Hope this helps.
First, don't misuse !important. To diagnose what's wrong with the CSS, you can use Firebug in Firefox / Developer Console in Chrome. ( Safari & IE have similar things ). Some CSS may be overridden, or layers maybe overlapped.
Without your HTML codes & jQuery scripts, I can't really help on this, but normally, to make the content to full height, you have to set html CSS and body CSS to use height: 100%;.
My jquery mobile background does quite extend to the end of the page. I'm testing this on my iphone in Mobile Safari. This white strip does not appear on my desktop. This same issue also does not occur when I test it on a Google Nexus' browser. Any ideas why this is happening?
I'm using this line of code in my css file to extend the background:
[data-role=page]{height: 100% !important; position:relative !important;}
Depending on whether you want to set it to the height of the HTML document or the height of the viewport (initially viewable area), you could try:
$('#container').css('height', $(window).height()); // returns height of browser viewport
$('#container').css('height', $(document).height()); // returns height of HTML document
In recently testing a web application on Windows/Mac desktop browsers - and then on an iPad I noticed various differences in Safari that I wasn't expecting. Even though the version # is the same.
I'd like to compose a list of those differences (for myself and others) to have as a developer reference.
e.g. in Safari on the iPad
iPad Safari takes full control of Select list/option styling
iPad opens the onscreen keyboard when an input element receives focus, thus inline floating calendar widgets (and the like) may not work as expected (or need to be altered)
iPad Safari doesn't support position:fixed like desktop Safari < iOS 5
iPad Safari (similar to iPhone/iPodTouch Safari) automatically hyperlinks 10 digit numbers to offer phone #/contact options
iPad Safari prompt('long message...','default'); shows only 1 line of the message (though it does provide scrolling of the message
I've heard from others that certain JavaScript doesn't work, etc. etc. but I have yet to fully test it thus I'd be grateful for any discoveries that you may have encountered.
A few more for you:
No Flash
Lousy iFrame support (so facebook like etc. needs a custom implementation for iPad)
Weird caching limitations
HTML textAreas doesn't get a scroll bar (you have to double-finger swipe - which of course, is amazingly intuitive)
In general. Treat it like a scaled up iPhone, not a scaled down Desktop.
I thought this might be useful: Apple's guide to preparing web content for the iPad
Just been caught out by the position:fixed issue my self
Safari on iPad has the same issue with button width/padding as on the iPhone
iPhone <button> padding unchangeable? describes this problem and a solution for removing padding on a button with text, but this does not help you if you want a button to be narrower than the padding itself (e.g. for a button that only has a small icon on it). To do that, I had to surround the button with an outer element with a defined width and overflow: hidden like so:
<span style="border: solid 1px blue; display: block; width: 16px; overflow: hidden">
<button style="-webkit-appearance: none; border-width: 0"> </button>
</span>
(the blue border is to show where the button is, it's not critical to the hack)
jQuery's offset() doesn't work: http://bugs.jquery.com/ticket/6446
It also looks like iPad Safari has issues with elements with overflow:auto; that therefore should show scrollbars (test page with div's and iframe's).
iPad Safari seems to have trouble handling background images in rare cases, showing weird lines of lower lying content.
There's not a lot about this in Google (yet).
iPad browser doesnt support file uploading(even if it supports it will useless as iPad does not have a standard File Browser). The file field appears with a Choose File button grayed out.
Beside doesn't support scrollbar in TextAea, it seems that we can using javascript to make text in TextArea selected automatically too.
This code will only move cursor to the end of text in TextArea.
<div>
<textarea id="text-embed-code" autocapitalize="off" multiline="">
There is a fox running after chrome.
</textarea>
<button onclick="testSelectText(event);">select text</button>
</div>
<script>
function testSelectText(e) {
var box = document.getElementById("text-embed-code");
box.select();
e.preventDefault();
return false;
}
</script>
There appears to be a bug in iPad Safari where a CSS element with both a background image and a background color is rendered with a slight border in the color of the background color. It should fill with the background image all the way to the edge of the rendered element.
I just had the same bug on my site, when trying to view it on an Ipad. The HTML structure is like:
<div class="main"> <!-- background-color: white -->
<div class="left"></div> <!-- background-image: url(some_transparent_png) -->
<div class="content">...</div>
<div class="right"></div> <!-- background-image: url(some_transparent_png) -->
</div>
The left layer uses a background-image, whereas the main layer uses just a background-color. The Ipad view shows a slight border at the edge of the left and right layer.
When i add
-webkit-background-size: 100% 100%;
to the left and right layer, the border disappears.
You can now control the styling of select lists on iOS by resetting it with -webkit-appearance: none;
This rule fixes animation flickering in Safari on iOS devices:
body {-webkit-transform:translate3d(0,0,0);}
There appears to be a bug in iPad Safari where a CSS element with both a background image and a background color is rendered with a slight border in the color of the background color. It should fill with the background image all the way to the edge of the rendered element.
24 bit transparent PNGS ABOVE A CERTAIN FILE SIZE don't render on the iPad2.
I can however get 8 bit ones of the same dimensions to render.
I haven't found out what this maximum file size is in order to get them to render.
I'm currently working on a small responsive web-app which makes heavy use of the iframe youtube api. Apparently the ipad version of safari doesn't support a few html5 methods which I use heavily in this project.
One of them is window.postMessage, which is a way of interacting with scripts on other pages, for example the a script that is used "within" that iframe. Autoplaying videos also doesn't work.
Frame problems. iPad Safari will both hide scrollbars and expand frames to the size of their content.
Changing the frame tag to include scrolling="yes" and noresize="noresize" appears to do nothing.
Some sites look fine on everything, even a Dreamcast browser, but not on iPad. The issue can be fixed using tables and iframes instead of normal framesetting (cols and rows, etc).
I also discovered that contenteditable is not supported in mobile safari, thus using a plain textarea is a better bet. Apple Developer Docs
position: fixed;
Does not work in iOS 4 but does work on iOS 5.