I've put the following meta tag in my mobile HTML
<meta name = "viewport" content = "initial-scale = 1.0">
After I coded the css file for mobile version, I realized it doesn't look good on lanscape mode since it has a different width size. I get an empty 160 pixel area on the right side.
Other than writing a separate css file for landscape mode, is there any way getting out of this?
You also need to bind the orientation change event. You can do it with this sample script:
<script>
$(function(){
function orient() {
if (window.orientation == 0 || window.orientation == 180) {
$('.featured').css('display','none');
orientation = 'portrait';
return false;
}
else if (window.orientation == 90 || window.orientation == -90) {
$('.featured').css('display','block');
orientation = 'landscape';
return false;
}
}
$(window).bind( 'orientationchange', function(e){
orient();
});
})();
</script>
If your css layout is based on screen percents instead of absolute values it should allow you to adjust to any screen layout without multiple css files just fine.
Look at the percent option: http://www.w3schools.com/cssref/pr_dim_width.asp
Or if you had a layout you wanted constant, you could center it.
center align the outise wrapper.
body{
max-width:786;/*target size of page*/
margin:0 auto auto auto;
}
is the easiest way.
You can use media queries to detect orientation changes and run different styles for each all in the same stylesheet.
Also for mobile it's a good idea to you use % rather than px for widths - what units do you use for css for mobile web apps?
/* Portrait */
#media screen and (orientation:portrait) {
/* Portrait styles */
}
/* Landscape */
#media screen and (orientation:landscape) {
/* Landscape styles */
}
Related
Paper isn't the same shape the world over. I have a document that I want to print differently when it's printed on A4 versus US Letter. Some elements should be hidden or shown. The obvious suggestion is to use a media query like so:
#media print and (max-height: 280mm) {
.a4-only {
display: none;
}
}
This doesn't appear to work, though, presumably because it's using the total document height or some irrelevant window height rather than the page height.
Is there a way of addressing page size accurately?
Browser support for print specific media queries is varied and there doesn't seem to be any good resources for it. It's really not possible to do this cross-browser, in some browsers the support is not there at all. Safari for example, seems to use the size of the browser rather than the page for it's media queries.
You can get it working in Chrome and Firefox. I knocked up a very rough demo using the size ratio to show what is possible with a bit of work. Currently tested and working on current versions of Chrome and Firefox on macOS. You should get a message at the start of the page with the printed page size (only when printed).
http://gsgd.co.uk/sandbox/print-test.html
The main trick is using vw units to check for height, hence using the aspect ratio you can target specific paper sizes:
#media print and (min-height:160vw) and (max-height: 170vw) { /* legal-size styling */ .standard.container::before { content: "LEGAL"; } }
#media print and (min-height:135vw) and (max-height: 145vw) { /* A4 styling */ .standard.container::before { content: "A4"; } }
#media print and (min-height:125vw) and (max-height: 135vw) { /* letter-size styling */ .standard.container::before { content: "LETTER"; } }
Unfortunately it seems like Chrome's page sizes for printing don't match the output page size so I guesstimated some styles that match for Chrome.
#media print and (min-height:120vw) and (max-height: 150vw) { /* legal-size styling */ .chrome.container::before { content: "LEGAL"; } }
#media print and (min-height:100vw) and (max-height: 120vw) { /* A4 styling */ .chrome.container::before { content: "A4"; } }
#media print and (min-height:80vw) and (max-height: 100vw) { /* letter-size styling */ .chrome.container::before { content: "LETTER"; } }
With an incredibly rudimentary browser detector script
if(navigator.userAgent.match(/chrome/i)) {
document.querySelector('.container').className = 'chrome container'
}
An idea to get something to work for Safari would be to manually resizing the window, but that would likely be a ton of work and require the user to select print size up front.
All that said you might get better mileage fixing up your layout to respond better to different widths.
For various reasons, I am creating a site (not online yet) that has separate pages for mobile. I want to add something to the "monitor" site which says "if the browser width is less than X pixels, view *mobilepagename.html instead of this page. What code can I add to the main site CSS to do this?
You can't switch pages with only CSS. You can do media queries to change styling based on screen size though.
#media screen and ( min-width: 'px' ) and ( max-width: 'px') {
/* Mobile Styles */
}
Or you can use
#media screen and ( max-width: 'px' ) {
/* Mobile Styles */
}
max-width and min-width don't need to be in pixels either. You can use a variety of units like vw, em, etc.
If you want to switch pages based on screen size you'll need to use Javascript.
if ( window.outerWidth < x ) {
window.location = 'newpage.html';
}
Edit
Combine the above Javascript with a resize event.
window.addEventListener('resize', function(e) {
if ( window.outerWidth < 1024 ) {
window.location = 'yourmobilepage.html';
}
});
I'm trying to use something like the boostrap framework to selectively choose which css class to apply to a given element, based on the window size.
For example, in bootstrap, is there a way to choose which class to apply based on which of the xs, sm, md and lg divisions the browser falls under?
Is there any easy way to do this? Do I need to use javascript? Should I look towards something other than bootstrap?
It sounds like you need a media query.
They will allow you to selectively apply styling depending on the window size.
For example:
#media all and (max-width: 1000px) {
.element {
color: blue;
}
}
The above would apply a color of blue to the text of any html tag which has a class of element ONLY when the screen size width is below 1000px.
you can use css media queries or use javascript like
$(document).ready(function() {
var hei = $(window).height();
var wid = $(window).width();
if (hei <= 640 || wid <= 360) {
$('element').css('property','value');
}
});
I would like to present a demo of a tablet application on a website (targeting desktop browsers).
I chose an iPad 2 for the demo whose resolution is 1024x768. Adding an iPad transparent graphic cover, the demo final size is 1210x1315px.
With such a resolution, most of the screens will be too small to display the demo properly.
I don't want to resize manually all the design, or to use CSS transform without knowing the relevant scale. Therefore, I'm looking for a way to resize automatically the design according to the available display resolution.
I tried to use the #-viewportproperty with no success...
Here is my non working code:
#media (min-height: 1400px) { /* if the screen's height is smaller than 1400px... */
#-viewport{
height:1400px; /* ... then, let's pretend it's 1400px high*/
}
}
I also tried this :
<meta name="viewport" content="height=1400, initial-scale=1" />
EDIT : jQuery workaround:
function resize(){
var documentHeight = $(document).innerHeight();
var targetedHeight = 1500;
if (documentHeight < targetedHeight){
var ratio = documentHeight / targetedHeight;
$('#container').css('transform','scale('+ratio+')');
$('#container').css('-webkit-transform','scale('+ratio+')');
$('#container').css('-moz-transform','scale('+ratio+')');
$('#container').css('-ms-transform','scale('+ratio+')');
$('#container').css('-o-transform','scale('+ratio+')');
}
}
This is what I finally did to achieve the expected result. I would have prefered a pure CSS solution...
I think you should be using media queries: Logic in Media Queries
I'm trying to set a rule using media queries:
#media screen and (min-width: 1920px){
#dados_contato_rodape p{
font-size: 5.5em;
border: 1px solid yellow;
}
}
But this format only applies when the screen width is 1930px or more (testing in addons responsive tools for Chrome).
My viewport tag is:
<meta name = "viewport" content = "width=device-width, maximum-scale = 1, minimum-scale=1" />
HTML:
<div id="dados_contato_rodape">
<p>contato#contato.com.br</p>
<p>55 51 9999 9999</p>
</div>
UPDATE:
If I put jQuery/Javascript code in this width screen (1920px), the result is 1920px:
$(window).outerWidth()
Media queries are working fine in other situations, but only in this case (until this moment) it's not working.
Can someone help me with it?
Thank you.
CSS screen widths and JS screen widths (both inner width and outer width) don't always match for all browsers.
This is the best explanation I know of: http://www.matanich.com/2013/01/07/viewport-size/
So in summary, trust your CSS #media setting rather over what's returned by JS in most situations.
Good luck!
Use a comparison of the jQuery method to the CSSOM and documentElement properties:
var window_diff = window.outerWidth - $(window).outerWidth();
var screen_diff = screen.availWidth - $(window).outerWidth();
var document_diff = document.documentElement.clientWidth - $(window).outerWidth();
It looks like jQuery is using the clientWidth property.
Use min-device-width as an alternative:
#media screen and (min-device-width: 1920px) {
...
}