Scenerio : I have to develop a responsive website in Angular JS in which some componets are sized with CSS media query while others with Javascript/Angular.
The problem of difference between Screen and Browser Resolution Starts with devices having width 1600 and above. Actually some browser are having resolution less than the screen resolution while others are exactly same as screen resolution
I am on a Win 10 computer with 14inch Screen and having supported screen resolutions upto 2560x1440
I tried to find out the browser width for some standard resolutions and found the following result:
for Screens 1366x768 Browser Viewport Width : 1366px
for Screens with 1600x900 Browser Viewport Width : 1583px
for Screen with 1920x1080 Browser Viewport Width: 1519.2px
for Screen with 2560x1440 browswer Viewport width 1433px
Now the problem is that css and js both apply the element sizes according to Screen Size and not the browser size, which browser is unable to display properly because it has lower resolution than screen.
Please note : the problem of low resolution on browser is specific to some devices and not all having resolution and all. And this is same for all browser on that device. i.e chrome, mozilla, ie etc.
Edit :
And also i don't want to use Bootstrap and possibly Jquery. If possible please suggest an Angular JS /HTML/CSS approach.
Related
What I want
I want to know physical screen width and height using javscript
Why I want
I want it so that I can use it when a portrait screen device(like mobile phone) wants to have a video call with landscape device(like laptop). This way I can swap width and height constraints according to the other end of the call. So for mobile device I will send video in portrait mode and for laptop I will send it in landscape mode, by swapping width and height dimensions(constraints).
I would like to know a device original screen size or orientation irrespective of browser widow size change or device is orientation change.
I have already found many posts asking about orientation or dimensions but they all seem to have some flaws, according to the comments, and some don't address physical screen dimensions.
I have mentioned what I aim to achieve. Maybe there is a better way to achieve that.
Please help.
Thank you
You could use screen.height and screen.width properties in javascript to get the height and width of the user's screen in pixels (irrespective of the browser size).
> screen.width
2048
> screen.height
1280
This works with most browsers and certainly works with Chrome, IE, Safari, Firefox, Opera.
Use
window.height and window.width
I have created my website with html, css and javascript and designed it for iPhone X to start off. My website is going to target on Instagram so my main targets are all types of mobile devices. I'm using media queries in css and I want to check for screen height. I'm not sure but it sounds like a good approach for me because for example iPhones don't differ that much in screen width as they do in screen height.
This is my way of approach in css:
#media only screen and (min-height: 481px) and (max-height:666px){*css*}
This should be a query for iPhone 5, but I got really confused by points vs pixels so I was hoping some of you can help me out.
Google chrome shows me the screen size of iPhone 5 as 320 x 568. I was guessing these are supposed to be points but it works just fine with my media query entered in pixels while screen size of iPhone 5 in pixels should be 640 x 1136 pixels.
My media query for iPhone 5 works just fine in Google Chrome iPhone 5 "setup" but I also have a test iPhone 5 at home where responsivity seems not working at all.
So before continuing my responsive design I wanted to have this clear.. Why is this? Is Google Chrome showing points or pixels? Should I use points or pixels in my media queries? Why does it work with pixels in css when they are completely different when I google screen sizes?
I would still consider myself as a beginner so I would really appreciate not too complicated answers.
Thank you!
I have almost always used $(window).width() to check the viewport width. It normally works for both browsers and devices. But for a website on which I need to show a particular splash screen if viewport width is less than 768px, this is not working. It gives correct width upto a point but below that it keeps giving 980px howsoever narrow I make the browser. There are a few particular conditions for this site:
This site was responsive in beginning (using bootstrap) but then made non-responsive. For this we removed viewport meta tag and set following rule in css that overrides its responsive widths:
.container{ width: 1170px; }
If I resize the whole browser i.e. the window that contains all browser tabs, then it does give correct width (less than 980px also, which is the desired behaviour), but if I use development tools and use the mobile layouts from there then width is never reported to be below 980px.
It would not have mattered that it worked on resizing only the main browser window, but the issue is that it is not working in devices as well. I added an alert and on mobile devices, again width is never alerted to be less than 980px.
Can someone please suggest some solution for this or explain why it is not working as expected?
I can't seem to find any authoritative source, but there are many pages that mention smartphones assume a website is 980px wide unless told otherwise.
Apple's developer site for instance says
The majority of webpages fit nicely in the visible area with the viewport width set to 980 pixels in portrait orientation, as shown in Figure 3-4. If Safari on iOS did not set the viewport width to 980 pixels, then only the upper-left corner of the webpage, shown in gray, would be displayed. However, this default doesn’t work for all webpages, so you’ll want to use the viewport meta tag if your webpage is different. See Supported Meta Tags for more on viewport.
Figure 3-4 Comparison of 320 and 980 viewport widths
(Incidentally, it was the iPhone which first did this, but other phones soon followed.)
So the solution is either to put
<meta name="viewport" content="width=device-width">
into the head (in your case, back into the head), or, acknowledge that the site is now not-responsive, and will not perform optimally on a phone!
I am having a issue when I try to make a web app responsive to screen-size.
I have css that I want to use for smartphones (iPhone, Andriod, blackberry, windows phone), and also have CSS I want to use for tablets.
My test devices are an iPad 3 (768 x 1024) and blackberry 10 (768 x 1280). and the widths being the same is an issue because my css starts with:
#media screen and (max-width:768px){
//enter code here`code here
}
Because the blackberry has slightly better resolution, it renders the CSS I don't want to use for it. Is there another way I'm suppose to check the media type? I was wondering if there is a way to check the width with a measurable distance (cm or in). not sure how to solve this.
thanks in advance
The “pixels” that are used in CSS declarations and when the browser reports the screen size of the client device have nothing to do with the actual real-world pixels on a device's screen. The “pixels” that are used in CSS are essentially an abstract construct created specifically for us web developers. To concern your self with the actual amount of real-world pixels on a high-resolution mobile screen is, for most web applications, completely unnecessary and will only lead you to utter madness.
You can determine the browser and device type by inspecting the navigator.userAgent property in JavaScript. For example, to test for (practically) any mobile device:
// if mobile === true, 99% chance the device is mobile.
var mobile = (/iphone|ipad|ipod|android|blackberry|mini|windows\sce|palm/i.test(navigator.userAgent.toLowerCase()));
You can of course inspect navigator.userAgent to determine if the user is on a specific type of device or browser that you are particularly concerned about or having a problem with.
But again, in my personal experience, clever, simple, and flexible responsive CSS design (supported by media queries and JavaScript, too, of course) will render beautifully on 99% of device/browser combinations without having to resort to inspecting navigator.userAgent to create different styles for individual devices.
You can also restrict your styles to the height:
#media screen and (max-width:768px) and (max-height:1024px){
// iPAD
}
You should add the meta tag viewport in your html header :
<meta name="viewport" content="width=device-width, initial-scale=1">
To sum up :
width = device width x pixel density
(Galaxy S4 : 1080 = 360 x 3)
This metatag allow you to catch the device width instead of the "faked width" (360 instead of 1080)
Some good reading :
https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag
http://screensiz.es/phone
http://www.html5rocks.com/en/mobile/mobifying/#toc-meta
I am wondering how to get the page width/height and not the viewport's width and height.
I tried innerWidth/Height and outerWidth/height.
In order to get the complete width/height of the screen so i need to + the inner with the outer? Or os there some other way to get the complete page width/height for the 3 devices i mentioned in my title.
if you're using iphone or ipad's UIWebView, you can use this Javascript Code;
NSLog(#"%#",[webview stringByEvaluatingJavaScriptFromString:#"document.body.scrollWidth;"]);
NSLog(#"%#",[webview stringByEvaluatingJavaScriptFromString:#"document.body.scrollHeight;"]);
your scroll size is your full page size.
i dont have any idea about android or etc.