My site's left margin is not working on iPad (portrait mode). It's perfectly centered in landscape mode but when I turn it to portrait view my left margin seems set to zero. Can you help me with this one?
my website: www.inclouds.co.uk/test
I am using ipadpeek to view my site on ipad:
for my css code:
#container {
width: 990px;
margin: 0 auto;
position: absolute;
}
#header {
width: 990px;
height: 220px;
margin-left: auto;
margin-right: auto;
margin-top: auto;
display: block;
}
Try changing the width to 100%. Your forcing it to be wider than the iPad screen in portrait.
Also rather than use that testing site, turn on Developer mode in Safari, connect your device to your computer and open the Web Inspector from Safari's Developer menu.
Related
I don't understand why the font-size property on iPhone "landscape" seems larger than portrait or desktop browser...
I have for body
font-size: 100%
and for text inside image 17px
PORTRAIT
LANDSCAPE
I assure that in landscape version text seems larger.
Include this to your site:
body {
-webkit-text-size-adjust: none;
}
I am working on an cordova application. I am using xcode V9.2 and running my cordova application on iPad with v11.1.1.I am seeing a black strip at the top of the screen. I googled for this issue and as per majority of suggestions tried using
1.)viewport-fit=cover in my viewport tag.
2.)
body{
padding-top: constant(safe-area-inset-top);
padding-top: env(safe-area-inset-top);
}
but the above suggestion are not working in my case.Need some help!
Here is what I use in my app:
body{
height: 100%;
margin: 0px;
padding: 0px;
width: 100%;
}
I have a web property and when viewing in an iphone, the fonts are all different even though they are set at 14px ....
font-size: 14px;
Here's a a screenshot from my iPhone 6 Plus:
Looking in chrome developer set for mobile, it is rendering fine but not on iPhone.
What is going on (link if answered before) and how do I fix this?
As I scroll on iOS Safari only for my fixed position menu, it slowly scrolls with the page (but much slower pace?) until it disappears. It works in all other browsers/devices even the iOS simulator just fine...Any suggestions? My code is as stated here:
.mobile-nav {
background-color: #455660;
height: 58px;
position: fixed;
width: 100%;
top: 0;
z-index: 5;
}
Nothing fancy, just your ordinary fixed pos. navigation. Again works on Chrome for iOS, and safari iOS simulator, Safari for OS X, etc...just real iOS devices with safari seems to be the problem.
Am trying to juggle a pair of "then" and "now" JPEG images on an iPad running Safari. In my BODY declaration I catch onload and onresize and call JavaScript which looks at window.innerWidth and window.innerHeight. Problem is, Safari appears to report accurate information for landscape orientation of iPad but not for portrait. For landscape, Safari reports inner 981x644 and outer 1024x673. But for portrait, Safari reports inner 980x1185 and outer 768x929. My JavaScript looks at whether the orientation is landscape or portrait and then resizes the pair of JPEGs for side-by-side or top-and-bottom, respectively. But that doesn't work well when Safari is lying about the dimensions. Can anyone explain what is happening here? Thanks.
I cannot explain why it does so (it's driving me crazy as well)
But I can offer a solution to your problem: do it with CSS instead of JS!
You can do it using media queries to build a different layout for portrain and landscape:
#media all and (orientation: portrait) {
...
}
#media all and (orientation: landscape) {
...
}
and using CSS3 to auto-size the images while keeping their aspect ratio:
background-position: center;
background-repeat: no-repeat;
background-size: contain;
Here is a JSFiddle with all the required code: http://jsfiddle.net/BULxm/
Hele is a direct link to the results, for testing on an iPad: http://fiddle.jshell.net/BULxm/show/