I'm developing a site that will be visualized on iPad's Mobile Safari and standard PC's browsers.
To adapt my layout (especially a to the mobile browser, I'm using this CSS3 media query:
#media only screen and (max-width: 980px), only screen and (max-device-width: 1185px) {
#galleria {
margin-left:5%;
margin-top:15%;
}
}
#media only screen and (max-width: 1185px), only screen and (max-device-width: 980px) {
#galleria {
margin-left:16%;
margin-top:15%;
}
}
This method works, but when I rotate my device, the bugs comes out.
Basically in this page there's a called "logo" that represent an image, here's its CSS:
#logo {
position:absolute;
top:30px;
left:26%;
}
#logo img {
width:75%;
}
This image for each time that I rotate the device, becomes more smaller.
How can I avoid this bug?
Thanks for all the answers!
Since you are using a percent based width it's not becoming smaller, your screen is becoming bigger... it's ratio has not changed... that said, if you don't wish it to change size you can either not hard-code in a pixel size, instead of a percent size... or you can have javascript calculate the percent and convert it to a pixel size then load that in as the variable so once the screen is rotated it won't update to a new ("smaller illusion") size.
Related
I thought that CSS #media query will work with pinch-zoom on iOS devices this way - user zoom an image and since the "area" become larger #media "replace" this image with larger(hq) one if it is present in a code (spoiler: I was wrong).
So, I start implementing it, code example:
<picture>
<source media="(max-width: 300px) and (orientation: portrait)" srcset="/image_1_1.png 1x, /image_1_2.png 2x, image_1_3.png 3x" />
<source media="(max-width: 500px) and (orientation: landscape)" srcset="/image_2_1.png 1x, /image_2_2.png 2x, image_2_3.png 3x" />
</picture>
I have a hi-res images on my site, and I simply cover all main screen size same way as in example above to reduce the load on devices with smaller screen, but when I tried to zoom in on it on iOS device nothing is happened, the image is just became lower in quality, no large one is replacing this smaller one.
I want to reduce the load time and bandwidth on devices which has no need in HQ graphics on page load, but if users want to take a closer look on images (zoom) they be provided with HQ copy of zoomed image.
How it can be done? (iOS compatible, pure CSS only)
//Yes, I saw other topics on this subject and in some of them I noticed that #media rules have to be applied automatically when zoom event occurs, but as I explained above, not in my case (addressing possible duplicate question mark).
I am developing an android app in PhoneGap . I have to adjust some button sizes as per the screen size on which the app is run .In android we have sp , dpi .Are there any similar type in jquery mobile.
I only caught a glimpse of jquery-mobile, as far as I know it does not directly address variable display sizes and pixel densities.
There are other mechanisms to handle this:
Set the viewport's target-densitydpi to medium-dpi (=160dpi). This virtualizes the px unit, e.g. 1px in html/css then corresponds to 2 physical pixels on a 320dpi device. Easy solution, but note that images are scaled as well.
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=medium-dpi" />
CSS: Use media queries to implement conditional styling. Adapting for different screen sizes dependent on width, height, aspect or orientation is straight-forward, see http://www.w3.org/TR/css3-mediaqueries/.
Different pixel densities can be handled with device-pixel-ratio (thanks to Marc Edwards for providing an example: https://gist.github.com/marcedwards/3446599).
#media screen and (-webkit-min-device-pixel-ratio: 1.5),
screen and (-o-min-device-pixel-ratio: 15/10)
{
body { background-image: ... } /* provide high-res image */
}
The media feature resolution is cleaner than device-pixel-ratio, but many browsers don't support it.
Use Javascript: Adapt button sizes, images etc. based on window.devicePixelRatio and window.screen.width and window.screen.height. Layouting per Javascript is considered as bad practice. Also flickering might result during loading as the execution starts after the pageload event.
I have a site up, http://www.webdesignrepo.com, where I'm using vw and vh a lot.
The site works absolutely fine on Desktop and on Android browsers, but goes haywire in iOS on both the iphone and the ipad. The Desktop media query is mainly vw and vh. Once you get down to <768px wide I have swapped out some of the viewport units with px units.
I have a feeling it's something easy to fix, and I'm just not seeing something simple.
The only thing I can think of is its calculating the vw and vh units incorrectly, which is odd because caniuse.com says iOS safari 6.1 and above supports viewport units.
Anyone have any idea why this is happening?
(And yes, I see the irony of this whole situation)
Thanks in advance
iOS 6 and 7 seem to calculate viewport height correctly at first, but any call to vh after rendering the page recalculates the viewport height and adds it to the previous value, inconsistently resulting in an enormously tall page. Unfortunately, this is not consistent and currently there is no known workaround.
The caniuse.com viewport section's interactive mode links to a GitHub issue page explaining in more detail and Emil Björklund explains with some diagrams on his blog.
In iOS the vw or vh units render incorrectly when content inside an element changes.
This site http://mjau-mjau.com/blog/ios-vh-bug/ provides a useful workaround using Javascript, and iOS specific.
I however, did not want to use JS and decide to override the vw and vh font sizes with em for all mobile devices,
#media only screen and (max-device-width: 480px) {
.caption h1{
font-size: 6em;
}
.caption h2{
font-size: 4.3em;
}
.caption h1:first-letter {
font-size: 1.5em;
}
.caption p {
font-size: 1.2em;
}
}
I'm building a website for a client who's majority of content is video. I'm using the HTML5 video element to display the content but have problems when it comes to Safari on iOS.
Safari on iOS does not download the video metadata until the user initiates the download, so the width and height properties of the video are set to a default size of 300 x 150 px - leaving a big area of black on either side of the video stretching the width of my containing element.
I'm trying to make the website as responsive as possible and so this default size does not work for me. Is there anyway to combat this so that Safari on iOS respects the video size?
I used the following CSS that worked for me. Tested on iPad mini with iOS 7.1
video {
min-height: 100%;
min-width: 100%;
height: auto !important;
width: auto !important;
}
The solution for iOS can be achieved with pure CSS. This works for <video> that occupies the width of the viewport, which is common in mobile.
Based on viewport units
1vw = 1% of viewport width
Get the width percentage computation based on aspect ratio
If your video is 16:9
9 divided by 16 = 0.5625 = 56.25% = 56.25vw
If your video is 4:3 and 21:9 that would be 0.75 and 0.4285 respectively.
Apply these CSS rules
video {
width: 100% !important;
height: 100% !important;
max-height: 56.25vw !important;
}
<video>
<source src="video.mp4" type="video/mp4">
</video>
The misbehaving iOS would be forced by the max-height to not grow taller than the ratio based on the width.
Via CSS, try giving it a width of 100% and a height of auto.
EDIT
In this case you need to use JavaScript to wait until the video has loaded the metadata and then read and set the width and height, for example:
var v = document.getElementById('myVideo');
v.addEventListener('loadedmetadata', function(e) {
this.width = this.videoWidth;
this.height = this.videoHeight;
}, false);
I haven't exactly tested this but it should lead you on the right track.
Try using width:100%, height:0, padding-bottom:56.25% (for 16:9 video) to set the size of the container element
Then get the container height/width to set the height/width of video element:
var the_case_study_video_wrapper = $('#tw-case-study-hero-video-wrapper'),
the_case_study_video = document.getElementById('tw-case-study-hero-video'),
the_height = $(the_case_study_video_wrapper).css('padding-bottom'),
the_width = $(the_case_study_video_wrapper).css('width');
$(the_case_study_video).css({
'height': the_height,
'width': the_width
});
And then maybe set the css again on orientation resize and/or browser resize...
I just set a fix width and height in css rule for video tag and safari displays the video properly.
I have a page with a lot of text and a couple pictures (like a news article) that I want to display in a way that looks good for both a tablet-sized device and a phone-sized device.
What I do right now is make Scale to Fit = YES and have my html have the meta tag
<meta name='viewport' content='initial-scale=1.0, maximum-scale=10.0'/>
but the font size is really too small on the iPad. I tried to resolve it by making initial-scale=2.0 but now it looks huge on the iPhone and even on the galaxy tablet.
How can I deal with varying device sizes and have the font size appear in a way that looks good all on devices?
Perhaps a better question is how can I make UIWebView wrap-text again after I zoom in?
I would keep the scale the same at 1.0, but increase the text size as soon as there is more space available on larger screens. You can achieve this using css media queries:
#media screen and (min-width : 768px) {
/* Styles, for example to increase font size */
body { font-size: 120%; }
}
This will increase the body font size to 120% when displayed on a device with a screen width > 768 (iPad portrait width). You can use multiple of these rules for different widths of course.
W3 has the official Media Queries specification.