When I view a webpage in Safari on my iPhone XS Max, the following javascript statements output Portrait logical resolution / pixels: 414x896 / 1242x2688 as expected.
<script>
document.write("Portrait logical resolution / pixels: " +screen.width + "x" + screen.height + " / ");
document.write(screen.width * window.devicePixelRatio + "x" + screen.height * window.devicePixelRatio + "<br>");
</script>
I also have in CSS the following definitions:
#media screen and (min-width:800px) {
.minWidth:after{
content: '800px';
}
}
#media screen and (min-width:900px) {
.minWidth:after{
content: '900px';
}
}
#media screen and (min-width:1000px) {
.minWidth:after{
content: '1000px';
}
}
I am surprised to see on the page that the following line
<span class="minWidth">Min Width: </span> outputs:
Min Width: 900px
This means that the device's min-width >= 900px and < 1000px. This however doesn't agree with the device's Portrait logical resolution / pixels being 414x896 / 1242x2688
Any explanation to this?
Adding the viewport meta tag to my webpage solved the problem.
Apple documentation says about the viewport meta tag (https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html):
"Use the viewport meta tag to improve the presentation of your web content on iOS. Typically, you use the viewport meta tag to set the width and initial scale of the viewport. For example, if your webpage is narrower than 980 pixels, then you should set the width of the viewport to fit your web content. If you are designing an iPhone or iPod touch-specific web application, then set the width to the width of the device. Refer to Supported Meta Tags for a detailed description of the viewport meta tag."
I added the following line to my webpage's header:
<meta name="viewport" content="width=device-width, initial-scale=1">
And now Javascript's screen.width is consistent with #media min-width value.
On my iPhone XSmax I get:
Portrait logical resolution / pixels: 414x896 / 1242x2688
Min Width: 400
Related
Are the viewport in mobile phones based on the screen resolution or the mobile browser?
Here are some popular mobile browser viewport sizes:
-Opera Mobile browser viewport 850px
-iPhone safari browser viewport 980px
-iPad (landscape & portrait mode) viewport 980px
mobile device?
-Android browser viewport 800px
-IE mobile browser viewport 320px
source.
But is the viewport size scaled by resolution of the
The mobile viewport size is based on the the CSS pixel ratio,
for example,
My device(Mi A1) has a resolution of 1080x1920 with 2.55 CSS pixel ratio,
the viewport on this device is calculated as
( 1080 / 2.55 ) x ( 1920 / 2.55 ) = 424 x 753.
A pixel ratio of 2.55 means for every 2.55 physical pixels on the device,CSS maps 1 pixel.
As today's mobiles have higher resolution on small screens,
The media queries in CSS refer to the calculated viewport and not the physical resolution while rendering pages on mobile phones to give a larger view of the page due to small real estate of the mobiles.
Whereas, this is not the case with laptops because with higher resolution they come with larger real estate.
My laptop has a screen resolution of 1366x768 pixels and when I check it's viewport size that to turns out to be 1366x768 on default zoom (when viewed full-screen).
Check yours on this pen
<body>
<p id="vpPara"></p>
<p>Changes with zoom-in and zoom-out</p>
<span id="vpSpan"></span>
<p id="screenPara"></p>
<script>
document.getElementsByTagName("body")[0].onload = function(){ vpSize();}
document.getElementsByTagName("body")[0].onresize = function(){ vpSize();}
var cnt = 0;
function vpSize() {
cnt += 1;
var w = document.documentElement.clientWidth,
h = document.documentElement.clientHeight,
screenW = screen.width,
screenH = screen.height;
//document.getElementById("p1").innerHTML = w + "x" + h;
document.getElementById("vpPara").innerHTML = "Viewport Resolution :" + w + "x" + h;
document.getElementById("vpSpan").innerHTML = "resize called "+ cnt +" times";
document.getElementById("screenPara").innerHTML = "Screen Resolution :" + screenW + "x" + screenH;
}
</script>
</body>
Technically, mobile devices feature two viewport sizes, the layout viewport and the visual viewport.
The layout viewport is fixed as it is based on the width and height of the screen of the physical device. Its dimensions can be accessed with the screen.width and screen.height properties in JavaScript and device-width for the purpose of media queries in CSS3.
The visual viewport is determined by the width and height of the browser window. Its dimensions can be accessed with the window.innerWidth and window.innerHeight properties in JavaScript and width for the purpose of media queries in CSS3.
Is it possible to make my web page open default in landscape mode in a mobile or tablet even if the orientation of screen is off using css3 media query or jquery ??
You COULD do this. Wether it is a good idea or not I'll let you decide (hint: it isn't).
Check for portrait orientation with CSS and rotate the body if necessary:
#media screen and (orientation:portrait) {
body {
transform: rotate(-90deg);
transform-origin: 50% 50%;
}
rotating the body in this way will not cause it's width and height to update to suit it's new orientation so we will have to correct this with JQuery:
function checkOrientation() {
var winWidth = $(window).width();
var winHeight = $(window).height();
if (winHeight > winWidth) {
$('body').width(winHeight).height(winWidth); // swap the width and height of BODY if necessary
}
}
checkOrientation(); // Check orientation on page load
// Check orientation on page resize (mainly for demo as it's unlikely a tablet's window size will change)
var resizeEnd;
$(window).resize(function(){
clearTimeout(resizeEnd);
resizeEnd = setTimeout(checkOrientation, 100);
});
DEMO (resize the preview panel)
DISCLAIMER: Not tested in anything but Chrome.
I'm trying to make a DIV width change as the browser size changes.
Not in some ratio that can be handled with percentage, but still with a dependency for the screen size.
I'm trying to make a div 80% max of the browser width, as long its divided by 20.
if screen is 1000px wide, so the div will be 800px, if the screen is 1024px so it will still be 800px (cause 80% of 1024 is 819.2, not divided by 20).
Except for doing a lot of media queries, I do not know how to do this.
This should hopefully get you on your way. It uses jQuery to resize the div by 20px increments. It's not perfect, but it's a start.
http://jsfiddle.net/ydtdS/3/
function tale(div,w) {
if(w%20==0) {
$(div).text(w);
$(div).css("width",w);
} else {
w = Math.floor(w / 20)*20;
$(div).text(w);
$(div).css("width",w);
}
}
$(window).resize(function() {
var windowWidth = $(window).width();
tale(".twenty",windowWidth);
});
tale(".twenty",$(window).width());
Did any of you noticed that when using -ms-viewport (with specific width of 320px or device-width) then web browser content can be moved outside available space? It seems like document size is wrong so i can scroll it's content to the left but there is nothing then white empty space. I can also zoom it out(but i should not) and it's size after that is not always the same. I'm aware of http://mattstow.com/responsive-design-in-ie10-on-windows-phone-8.html but it does not help. It happens after second or third navigate to the same content and disappears for example when device is rotated.
Windows Phone 8 does not properly recognize the meta viewport tag that is standard for webkit and mobile web.
Try this in your CSS
#-ms-viewport{width:device-width}
And then add this JS
if (navigator.userAgent.match(/IEMobile\/10\.0/)) {
var msViewportStyle = document.createElement("style");
msViewportStyle.appendChild(
document.createTextNode(
"#-ms-viewport{width:auto!important}"
)
);
document.getElementsByTagName("head")[0].
appendChild(msViewportStyle);
}
More here (credit)
try adding the following
#-ms-viewport {
user-zoom: fixed;
max-zoom: 1;
min-zoom: 1;
}
I'm running into an issue with the ModalPopupExtender when displayed on a small screen device. The modals height does not rescale to fit within the viewable window. Because it is centered the top and bottom of the modal gets clipped. Trying to scroll it only scrolls the underlying page not the modal. Anyone run into this or have suggestions on a fix?
You have to set Po-pup's panel to use scroll bars.
There is 2 way of doing this :
Set a fixed height (ex : 500px) and overflow to auto using CSS.
Compute the height pup-up using JavaScript, you still have to set the overflow to auto with CSS.
Here an example of a JavaScript function that set the height to 90% of the page's height.
function pageLoad() {
$get('<%= Panel.ClientID %>').style.height = document.documentElement.clientHeight * 0.9 + "px";
}
I decided to handle it using a series of media queries....
.sModalCnt {max-height:480px;overflow-y:auto}
#media only screen and (max-height:600px) {
.sModalCnt {max-height:380px}
}
#media only screen and (max-height:500px) {
.sModalCnt {max-height:280px}
}
#media only screen and (max-height:400px) {
.sModalCnt {max-height:180px}
}
#media only screen and (max-height:300px) {
.sModalCnt {max-height:80px}
}