I'm building a bookmarklet that needs to have it's font sizes independent of the viewport or zoom level of the current page (when the javascript is injected).
What happens now (on tablets + phones mainly) is that the fonts are too small when the page fits the mobile viewport (or really small zoom levels on a PC browser).
Here's a screen grab:
http://i.stack.imgur.com/liO0C.png
Does anyone know a way to do this? Javascript or CSS solutions are great by me.
Thanks!
Sean
Check This -
Preserve HTML font-size when iPhone orientation changes from portrait to landscape
Load mobile CSS if user is on Android
Even you can have Javasacript -
<script>
if ((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i)))
{
var t= '';
document.write('<link href=http://..../.../your.css media=all rel=stylesheet type=text/css />');
}
</script>
Tutorial Site :
http://css-tricks.com/snippets/javascript/redirect-mobile-devices/
http://www.gethifi.com/blog/three-ways-to-target-mobile-devices
Related
Background
I have a web application that works both on desktop (rendered inside iframe, fixed width align right), and mobile (full screen). And I'd like to create a CSS rules (within inside the iframe's document) with media queries that applies only to mobile devices, but not desktop.
More Specific Background
Thanks to #Andy that's asking the right questions in the comment.
Our application is sold as two different products. The standalone application (i.e. non-iframe) and the embedded application (i.e. iframe) within our client's website. The two products have two different styling requirements: the standalone application will have global styling across our clients, while the embedded application must match each client's website color schemes
When integrating embedded application on our client's mobile site, we found that they have <meta name="viewport" content="width=320"> that zooms in all elements, we couldn't edit this meta tag. Therefore we'd like to apply a CSS rule only for embedded application, mobile view, and this client only, to fix the enlarged elements.
CSS Media Query max-width
Using the standard max-width query won't work because even on desktop the width recognized is the iframe's width so it's always considered mobile.
#media screen and (max-width:480px) {
... /* this still runs on both mobile and desktop */
}
CSS Media Query max-device-width
Searched and read around the internet and found max-device-width:
#media screen and (max-device-width:480px) {
... /* this runs on mobile devices only */
}
at first this seem to work as it looks for device's width instead of document's width. However my concerns are:
device-width query is deprecated https://stackoverflow.com/a/18500871/1019950
On desktop's (i.e. Chrome) mobile emulator,max-device-width still considers desktop's screen width, so it doesn't apply the mobile CSS rules.
How to create a media query that works inside iframe and applicable to mobile-devices (or mobile emulator) only, i.e. top document's width is less than 480px?
This is tricky one. The way I solved this was by calling a function in parent using postMessage to return the width of browser viewport, I then set a class dynamically on the elements that require mobile only CSS styling.
I am happy with final solution though as it is robust.
jQuery Example
In parent page
window.addEventListener('message', event => {
var width = jQuery(window).width();
var iFrame = document.getElementById('iframe_id');
iFrame.contentWindow.postMessage({"get_parent_width":width}, "*");
}, false);
In iFrame
window.addEventListener('message', event => {
var width = event.data.get_parent_width;
if(width < mobile_trigger_width || isMobile){
..custom rules for mobile
jQuery("#div_id").addClass("mobile");
}else{
..custom rules for desktop
jQuery("#div_id").removeClass("mobile");
}
}, false);
Im creating a responsive site and i didn't understand why my document width is 980px, even tho im in braves inspector tool with a responsive size of 428x807. If i set a media query like this:
#media only screen and (max-width: 576px) {
h4 {
color:blue;
}
}
Should this not say that if the screen is less than 576px its supposed to be colored blue? How come the inspector and the actual size of document is different?
There is a special mate tag to force browsers, in particular mobile ones, to be real about their viewport widths. This tag is
<meta name="viewport" content="width=device-width, initial-scale=1.0">
and should be included in the head of your document. Historically mobile devices would pretend to have desktop sizes since websites weren't expected at all to be rendered at such small screen sizes when mobile devices were first popularised. We are talking about the blackberry era here and it was deemed more appropriate to render a website extremely zoomed out on mobile so that you could zoom in as needed and at least see all the content as intended. I hope this is your problem because otherwise I can't think of another explanation.
My site requires at least 720px width. Iphone 6 appears a resolution of 1334x750 but their browser reports 667px. Samsung S5 supposedly is 1080x1920 but the browser reports 640.
I know the screen can handle the details but I'm not sure how to get a larger resolution. I need 720px to be the minimum width so what do I do to have phones <720px to scale correctly? By scale I mean show all 720px without any scrolling
You need to start with this in the head code <meta name="viewport" content="width=device-width,initial-scale=1">
then add media queries to you css sheet that support all current devices
http://codepen.io/mlegg10/pen/JKdOaj
If I understand you correctly, you want your contents width to be scaled down to the width of the viewport. This is usually done automatically unless the code contains the following line in the head section of the page:
<meta name="viewport" content="width=device-width, initial-scale=1">
So if this is in your code, remove it. (But note that you make your page non-responsive that way, which is rather unusual nowadays!)
Concerning your observations in regard to device pixels: This has to do with "pixel density" which is important for the better display/sharpness of text (fonts) and vector graphics, as well as images if high-resolution images are supplied to the browser. For example the iPhone 6 actually has a height of 1334 physical pixels (ratio 1:2), which is however treated as 667px when it comes to CSS pixel units.
Input this in .css code before using the code design
#media only screen and (min-width:720px)
and (max-width:1336px) and (min-resolution
I am using the following two methods for a responsive website.
HTML
<meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">
CSS
img {
max-width:100%;
}
However, when it loads on a smartphone, it appears to be too zoomed in. The widest image on this website is 240px but it takes up the entire screen on an iPhone 5 which has a viewport of 640px. How do I correct this?
Thats what the viewport meta tag does. the HTML attribute:
content="width=device-width"
Instructed the browser to configure its viewport to the devices screen width - in "dips" (device independent pixels) - not physical pixels.
In the case if the iphone 5 - I believe thats 320 px. you could test this by adding this script to the bottom of your HTML
<script>
var el = document.createElement('h2');
el.textContent = window.innerWidth;
document.body.appendChild(el);
</script>
If not familiar with dips, you can think of them as approximating the pixel density of a "classic" computer monitor as a way of getting around the fact that current device screen's have different physical resolutions, so dips were created to provide a level playing field for developers.
The CSS engine will then base its calculations on the HTML element being 320 pixels wide.
In that case an image whose width is defined in CSS at 240 CSS pixels wide would take up most of the screen width.
As an aside, in order to maximumise image sharpness most leading mobile browsers are smart enough to use the full physical pixel density for displaying the image - whilst basing its size on the CSS pixels.
I have tried a lot of different stuff like:
meta tag: <meta name="viewport" content="width=device-width, initial-scale=1">
and #-ms-viewport and all that to make my site scale correctly on ipad mini and iphone
for some reason I can get the meta tag viewport with a scale of 0.65 to work on the mini, but on the iphone it really big.
hopefully someone here can help me make this work!
Here is the site
Firstly it looks like you've mistyped your DOCTYPE declaration, you've put:
<DOCKTYPE html>
It should be:
<!DOCTYPE html>
That aside, if you want the initial scale to change based on screen size you could do something like the following:
var screenWidth = screen.width;
var screenHeight = screen.height;
viewport = document.querySelector("meta[name=viewport]");
viewport.setAttribute('content', 'width=device-width, initial-scale=1.00');
// ipad/ipad mini/tablet screen sizing
if(screenWidth < 1024) {
viewport.setAttribute('content', 'width=device-width, initial-scale=0.65');
}
// iphone/smartphone sizing
if(screenWidth < 600) {
viewport.setAttribute('content', 'width=device-width, initial-scale=0.5');
}
This would set the inital scale at 0.65 on ipad sized devices, and 0.5 on iphone sized devices.
I would recommend that you look into responsive design to make the website more usable on tablets/smartphones (it sounds like you're currently just trying to shrink the desktop site, which isn't really a great solution in my opinion)
The above code also only runs on initial page load, if you wanted to run this on browser resize you could utilisie the resize event in JavaScript, e.g.
window.addEventListener('resize', function(event){
// do stuff here
});
You could create a function containing my example code and then run it on page load and page resize.