I'm trying to detect device orientation on my website.
Orientation value seems to be ok after orientationchange event.
$(window).on("orientationchange",function(event){alert(window.orientation);})
However problem is initial window.orientation value at page startup which is always 0 even when device is in landscape position.
$(document).ready(function(){alert(window.orientation);});
It doesn't change after some delay (i've checked that) it changes to right value only after orientationchange event.
Is there any way to get proper orientation at page startup?
It looks like that property isn't actually supported in anything other than chrome for android: https://developer.mozilla.org/en-US/docs/Web/API/Screen/orientation
Depending on what it is you want to do you could use CSS rules?
#media only screen and (max-width: 999px) {
/* rules that only apply for canvases narrower than 1000px */
}
#media only screen and (device-width: 768px) and (orientation: landscape) {
/* rules for iPad in landscape orientation */
}
#media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
/* iPhone, Android rules here */
}
have you tried approaching the issue like this:
$(document).ready(function(){
$(window).load(function(){
alert(window.orientation);
});
});
alternatively you can get the orientation of the device manually:
$(document).ready(function(){
alert((($(window).width()>$(window).height()) ? 90 : 0));
});
I just tested it on a Windows Phone and there it works. Which phone/os/browser are you using?
Related
Summary: I am attempting to design a restaurant menu. When viewing the site on a desktop the user should see the entire menu i.e a category ('Appetizers') and all of the food entries in said category('Fried Calamari', 'Mozzarella Sticks', etc). However, when viewed on a mobile device I would like the entries to be hidden and the food categories to be buttons. When the 'Appetizer' button is clicked, the user should then see 'Fried Calamari', 'Mozzarella Sticks', etc. I feel like I am going about implementing this in a convoluted way. My code:
index.html:
<div class="food-section-heading" id="appetizers">Appetizers</div>
<div class="menu-item">
Fried Calamari
</div>
<div class="menu-item">
Mozzarella Sticks
</div>
using javascript to hide what's normally there and present the button:
/* Function definitions */
function hideElements(className){
elements = document.getElementsByClassName(className);
for(i = 0; i < elements.length; i++){
elements[i].style.display = 'none';
}}
function showElements(className, displayType){
elements = document.getElementsByClassName(className);
for(i = 0; i < elements.length; i++){
elements[i].style.display = displayType;
}}
/* Main Program */
//if iPhone X or smaller hide '.menu-item' elements
if(window.screen.availWidth <= 375){
hideElements('food-section-heading')
hideElements('menu-item');
}
/* Code to create button and show elements upon click event not included. I stopped writing it and came here because I feel I can't be doing this right*/
Is there any easier way to go about this? (A good example of what I am talking about is grubhub.com on mobile vs what grubhub.com presents on Desktop.)
There are many ways to go about displaying the same document differently on different devices.
When targeting desktop / laptop / tablet / mobile a usual starting point would be to choose whether you want to detect:
the browser viewport size / viewport orientation / device screen size; or
browser make and version; or
data related to the browser's touch capability
Then, you can use:
CSS #media queries (commonly used in Responsive Design)
Client side browser sniffing (via javascript)
Server-side browser sniffing (used in RESS / Responsive with Server Side)
Touch detection (again, via javascript)
and more.
Targeting via CSS #media queries for screen size
One of the more easily-implemented approaches is to deploy one or several CSS #media queries.
Here is a simple #media query targeting screen sizes which are 800px wide or narrower:
#media only screen and (max-width: 800px) {
.menu-item {
display: none;
}
}
Adding in #media query hover: hover | none
If you want more sophisticated targeting (e.g. in a situation where you don't want to target narrow browser windows on a desktop / laptop) you can target the screen size (as above) in combination with checking if the screen supports a hovering action (on the basis that if it doesn't it's very likely a touchscreen):
#media only screen and (max-width: 800px) and (hover: none) {
.menu-item {
display: none;
}
}
Older approach using device-size #media queries (not recommended)
Before the #media query hover: hover | none arrived, if you wanted more sophisticated targeting, you could target actual device sizes with a #media query:
#media only screen and (min-device-width: 320px) and (max-device-width: 480px),
only screen and (min-device-width: 320px) and (max-device-width: 568px),
only screen and (min-device-width: 360px) and (max-device-width: 598px) {
.menu-item {
display: none;
}
}
But in practice this tends to be less useful and harder to maintain.
I think you might find some useful information in this thread.
Writing for mobile is very different from writing for desktop. It would likely be best if you used a router to direct users to one page if they are on mobile, and the one you've already created if they are on desktop.
on the following url:
https://gist.github.com/marcedwards/3446599
I found the following CSS code to check high DPI screens.
#media
only screen and (-webkit-min-device-pixel-ratio: 1.3),
only screen and (-o-min-device-pixel-ratio: 13/10),
only screen and (min-resolution: 120dpi) {
/* Your code to swap higher DPI images */
}
This code is based on:
https://bjango.com/articles/min-device-pixel-ratio/
My question is: Is there any way to create a flag (true/false) based on if above conditions are meet or not?
My goal is: I have a set of images: <img src="..." /> where depending on the screen resolution (above condition meets or not) I wanna use one image or other.
Thanks!
As #Huangism and #phuzi pointed out, the way is to use: srcset.
The only caveat about this is it is not supported by IE yet (as of today).
Could use some temporary element with a class to change on media query trigger to test:
HTML:
<p class="my-flag">Did the media query trigger?</p>
CSS:
#media
only screen and (-webkit-min-device-pixel-ratio: 1.3),
only screen and (-o-min-device-pixel-ratio: 13/10),
only screen and (min-resolution: 120dpi) {
/* Your code to swap higher DPI images */
.my-flag {
color: red;
}
}
And if you need this check in JS just ask
if($('.my-flag').style.color == "red")) {
/* do stuff */
}
I have a website whereby a page is populated using JavaScript - a field called salary is controlled on desktop or device using the following on page load
if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
$('.salary-desktop').hide();
$('.salary-tablet').show();
}
The CSS for the field is as follows:
#media screen and (max-width: 480px) {
#account-details article table .salary-tablet {
display: none;
}
#media screen and (max-width: 768px) {
#account-details article table .salary-tablet {
display: table-row;
}
}
If I access the page on an iPad in portrait, the salary displays OK and if I change the orientation to landscape, the salary hides. All correct.
If I access the page on an iPad in landscape, the salary displays and any change of orientation has the salary always displaying.
Is there something wrong with the CSS or is the fact that the $('.salary-tablet').show(); being called on the iPad when in landscape then caching/overriding any style the CSS attempts to apply to it?
Thanks
The jQuery you wrote is going to add inline styles, which will take priority over your CSS code. If you want to run specific code for certain orientations, you should target the orientation specifically. In css, something like:
/* portrait */
#media screen and (orientation:portrait) {
/* portrait-specific styles */
}
/* landscape */
#media screen and (orientation:landscape) {
/* landscape-specific styles */
}
and in jQuery, something like:
$( window ).on( "orientationchange", function( event ) {
//orientation change code here);
});
something like:
if orientation = landscape {
hide divA
else
show divA}
excuse non script example, thought it would be easier to explain that way as not too sure the best way to go about it
Yes you can do this with css media queries.
jsfiddle demo (Make the width of the html view smaller and see what happens)
#media all and (orientation:portrait) {
/* Styles for Portrait screen */
}
#media all and (orientation:landscape) {
/* Styles for Landscape screen */
}
So apparently, in one of the last update, Firefox decided to take into account the display settings of windows. (see https://support.mozilla.org/en-US/questions/962990?page=1 ) As a result, if the display settings of windows is set to Medium (125%), firefox will zoom in while the other browser display the website normally.
But what i wan't to know is if there is any option for a developer to prevent this zoom in firefox?
With firefox, you can use media queries to detect zoom levels / resolutions
Check out this example (only works in FF)
http://dev.jeffersonscher.com/nozoom.html
#media (max-resolution: 91.95dpi) {
body {font-size:17.8px;}
}
#media (min-resolution: 100.05dpi) and (max-resolution: 115dpi) {
body {font-size:14.5px;}
}
#media (min-resolution: 115.05dpi) and (max-resolution: 124dpi) {
body {font-size:13.2px;}
}
#media (min-resolution: 124.05dpi) and (max-resolution: 138dpi) {
body {font-size:12px;}
}
#media (min-resolution: 138.05dpi) and (max-resolution: 149dpi) {
body {font-size:10.6px;}
}
#media (min-resolution: 149.05dpi) {
body {font-size:9.2px;}
}