I'm trying to remove a javascript event only to mobile phones which are in landscape mode. I've tried using CSS media queries unsuccessfully, but I could not find a correct answer to this.
As an example, how to cover a code which detects landscape mode for at least iphone4 and Samsung Galaxy 3? Both are mobile devices but have different dimensions.
Is there a media query solution to target only landscape mobile devices?
Is there a javascript solution to target only landscape mobile devices?
/* Smartphones (portrait and landscape) ----------- */
#media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
/* Styles */
}
/* Smartphones (landscape) ----------- */
#media only screen
and (min-width : 321px) {
/* Styles */
}
/* Smartphones (portrait) ----------- */
#media only screen
and (max-width : 320px) {
/* Styles */
}
Related
I have a webpage that is 1800x1200px in dimension (made for desktop PCs). On tablets the page isn't viewed entirely, part of it spans over the right viewport. What I want to achieve is that the webpage displays correctly on tablets using a smaller zoomfactor. I'm absolute beginner with javascript, can anyone explain the js code to me to do that?
Try adding this in the <head> section
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Also you might have to use CSS media queries. If you are not familiar with that, Its better to learn it first.
For the time being, use the below media queries in your css
#media (min-width:320px) { /* smartphones, iPhone, portrait 480x320 phones */ }
#media (min-width:481px) { /* portrait e-readers (Nook/Kindle), smaller tablets # 600 or # 640 wide. */ }
#media (min-width:641px) { /* portrait tablets, portrait iPad, landscape e-readers, landscape 800x480 or 854x480 phones */ }
#media (min-width:961px) { /* tablet, landscape iPad, lo-res laptops ands desktops */ }
#media (min-width:1025px) { /* big landscape tablets, laptops, and desktops */ }
#media (min-width:1281px) { /* hi-res laptops and desktops */ }
Sample usage
/* Use a media query to add a breakpoint at 768px: */
#media screen and (min-width: 768px and max-width: 1023px) {
.main{
width: 80%; /* The main class's width is 80% , when the viewport is gretaer than 768px or smaller than 1023px which is ideal for tablets (not big tablets) */
}
}
You can use media queries for achieving this behaviour, example as follows -
#media only screen and (max-width: 600px) {
body {
background-color: lightblue;
}
}
This will apply a background color when the screen size will be 600px or smaller.
The best answer i can give right now is to use css zoom
body{zoom:30%}
body:after{content:"lol"}
I want to set a fixed width for my webpage so that users can scroll when they resize their browsers, but I want the maximum size of the page to be the user's maximum screen size (so there are no white spaces if they use a large screen, or so they wouldn't have to scroll immediately if they use a small screen).
I tried using Javascript to create functions that returns the screen width and height, but it seems that it isn't possible to call these functions as the width and height of the page.
What I have right now:
<script>
function getScreenWidth() {
return screen.width;
}
function getScreenHeight() {
return screen.height;
}
</script>
<body width="getScreenWidth()">
...
</body>
Calling the getScreenWidth() function into the width of the body doesn't seem to be working.
You can use css properties in new browsers and the units vh and vw which are viewport height and width. Thus you can use something like
body {
width: 100vw;
min-width: 100%;
height: 100vh;
min-height: 100%;
}
where we include the min-{width,height} attributes for legacy browsers which do not support vw, vh. If you do not want the use to be able to scroll you could also include overflow: hidden as an attribute.
Oh! I was unaware about width:100vw option but that is good since that is only CSS.
<script>
function setWH() {
$('body').css('width': $( window ).width() + 'px');
$('body').css('height': $( window ).height() + 'px');
}
</script>
<body onload="setWH()">
...
</body>
You can use the below:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
Fennec 1.1 (Firefox for mobile) also adds support for minimum-scale, maximum-scale, and
user-scalable, with defaults and limits similar to Safari's. These
properties affect the initial scale and width, as well as limiting
changes in zoom level.
Just to clarify things even more, in iPhone and iPad devices, the device-width always corresponds to the width of the device in portrait mode, regardless of whether the device is in that mode or landscape instead. With other devices, its device-width changes depending on its orientation.
Further you can control the rendering using CSS media queries for
different devices. Lets see some more CSS media queries now that
capture different devices and screen dimensions:
/* #### Mobile Phones Portrait #### */
#media screen and (max-device-width: 480px) and (orientation: portrait){
/* some CSS here */
}
/* #### Mobile Phones Landscape #### */
#media screen and (max-device-width: 640px) and (orientation: landscape){
/* some CSS here */
}
/* #### Mobile Phones Portrait or Landscape #### */
#media screen and (max-device-width: 640px){
/* some CSS here */
}
/* #### iPhone 4+ Portrait or Landscape #### */
#media screen and (min-device-width: 320px) and (-webkit-min-device-pixel-ratio: 2){
/* some CSS here */
}
/* #### iPhone 5 Portrait or Landscape #### */
#media (device-height: 568px) and (device-width: 320px) and (-webkit-min-device-pixel-ratio: 2){
/* some CSS here */
}
/* #### iPhone 6 and 6 plus Portrait or Landscape #### */
#media (min-device-height: 667px) and (min-device-width: 375px) and (-webkit-min-device-pixel-ratio: 3){
/* some CSS here */
}
/* #### Tablets Portrait or Landscape #### */
#media screen and (min-device-width: 768px) and (max-device-width: 1024px){
/* some CSS here */
}
/* #### Desktops #### */
#media screen and (min-width: 1024px){
/* some CSS here */
}
You can use Viewport Units to set sizes relative to the viewport width and height. So, for example, "max-width:100vw;" sets an element's maximum width to the width of the viewport.
I'am creating new web site. My intention is creating one page for desktop and mobile and set styles depend of device (mobile or desktop). I know I can achieve everything with pure javascript, but I would like to use also CSS and media queries. My question is: how can I set style only for mobile devices using CSS media queries? I was trying to use:
#media only screen{
style...
}
But it works for both, mobile and dekstop browsers.
You can not simply target mobile but have to give break point in order for it to work. You will have to use min-width or max-width for that to work
/* Smartphones (portrait and landscape) ----------- */
#media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
/* Styles */
}
/* Smartphones (landscape) ----------- */
#media only screen and (min-width : 321px) {
/* Styles */
}
/* Smartphones (portrait) ----------- */
#media only screen and (max-width : 320px) {
/* Styles */
}
Example: This will hide div with class of sidebar and set container width to 100% on smaller screens
#media only screen and (max-width : 321px) {
.sidebar {
display:none;
}
.container{
width:100%;
}
}
Have you tried setting your styles based on screen-size rather than device?
https://css-tricks.com/snippets/css/media-queries-for-standard-devices/
If the styling, and even content, is entirely different from mobile to desktop, using a framework like Bootstrap makes this really easy. You can follow their strategy by creating hidden-xs and visible-xs classes with your own media queries, and apply those classes to different divs. Not the DRYest way of doing it, but gets the job done.
#media only screen
and (min-device-width: 375px)
and (max-device-width: 667px)
and (-webkit-min-device-pixel-ratio: 2)
and (orientation: portrait) {
.hidden-xs {
display: none;
}
.visible-xs {
display: block;
}
}
I have checked many sites using bootstrap menu, it collapse after certain screen size , I am using 22 inch screen and navbar collapse when I see my website..
You have to use media query for your screen size in terms of pixels.
For example:
// Landscape phones and below
#media (max-width: 480px) { ... }
// Landscape phone to portrait tablet
#media (max-width: 768px) { ... }
// Portrait tablet to landscape and desktop
#media (min-width: 768px) and (max-width: 980px) { ... }
// Large desktop
#media (min-width: 1200px) { .. }
Bootstrap menu can be resized for almost many kind of screens like mobile, tablet, ipad, laptop, desktop etc. But some resolutions may have missed out in their media query. For ex: as you told " I am using 22 inch screen ".. your desktop's max-width may not have listed in their inbuilt media query.
So, what I suggest is it is better to write your own media query for that types of cases.
For example,
#media (max-width: 1080px) { ... }
#media (max-width: 1440px) { ... }
I Use This Code To Automatically Detect Users Screen Resolution And Redirect To Another Page
<script>
if (screen.width==1367 && screen.height==768)
{
window.location="http://www.yoursite.com"
}
</script>
But For Every Screen Resolution I Cant Edit The Site.
Is It Possible That I Just Make Single Page That Can Automatic Fit To Screen.
Thank-You IN Advance.
You could use CSS3 media queries rather than javascript to detect the device and load the page accordingly.
#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 */
}
You would also need to add the meta port view tag as below:
<meta name="viewport" content="initial-scale=1.0">
You can use media queries and specify different stylesheets for different screens.
https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries
for example
<style>
#media (max-width: 600px) {
.facet_sidebar {
display: none;
}
}
</style>
For examples of already put up websites see: http://mediaqueri.es/
'defau1t' is write. Also you can set it by css like=> "width:100%"; you can check http://www.w3schools.com/js/js_window.asp too. Everything depends on your requirements.