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.
Related
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 would like to create a website that is not responsive, but if the windows are resized, everything is scale up / down, and keep the same ratio. It doesn't matter if the words are too small in small screen, the first priority is to prevent the element overlap when resize
I have tried using:
<meta id="meta" name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;">
And
<script type="text/javascript">
$(document).ready(function () {
$(window).resize(function () {
calculateNewScale();
});
calculateNewScale(); // if the user go to the page and his window is less than 1920px
function calculateNewScale() {
var percentageOn1 = $(window).width() / 1920);
$("body").css({
"-moz-transform": "scale(" + percentageOn1 + ")",
"-webkit-transform": "scale(" + percentageOn1 + ")",
"transform": "scale(" + percentageOn1 + ")"
});
}
});
And also with CSS
body {
width:100vw;
height:100vh;
}
The website is here:
kotechweb.com/new_focus/page/about_us
The problem is, right now the content is overlapped when resized.
The view port:<meta name="viewport" content="width=device-width, initial-scale=1">. This will make the browser render the width of the page at the width of its own screen.
This article gives more information for the viewport meta tags:
https://developer.mozilla.org/en/docs/Mozilla/Mobile/Viewport_meta_tag
<meta id="meta" name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;">
works only when the window is loaded not re-sized
calculateNewScale() function just tries to resize the body
Your font size are set in px - change them to % or rem
I know you dont want the site responsive but setting CSS media queries can help with what you want.
you can use for make response
1.width=device-width part sets the width of the page to follow the screen-width of the device (which will vary depending on the device).
2.initial-scale=1.0 part sets the initial zoom level when the page is first loaded by the browser.
e.g. meta name="viewport" content="width=device-width, initial-scale=1.0"
some additional rules:
1. Do NOT use large fixed width elements
2. Do NOT let the content rely on a particular viewport width to render well
3. Use CSS media queries to apply different styling for small and large screens
also you can use media property and apply screen wise css.
There are few things you can do:
1. change your HTML layout. Put image, content and footer within a container or wrapper like
<html>
<head></head>
<body>
<div id="wrapper">
//everything goess inside here
</div>
</body>
</html>
use rem/em instead of px. You haven't used rem/em/vw consistently. Meaning, for left-margin you have used 50px. And there will be time when it will cause word shift.
your tag includes bootstrap. If you are using bootstrap....then you are better off using BootStrap Grid. I would first build a page for mobile viewing and then I will use same layout for bigger screen.
good luck.
If you are using bootstrap, you could simply change your container class to class = "container-fluid"
Your viewport tag is wrong, should be <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
But maybe <meta name="viewport" content="user-scalable=no" /> will work.
Using pure transform: scale(x), you are going to run into a lot of margin, centering, and positioning issues, unless you compensate with some javascript logic.
Some CSS things you can do:
1) You can make the main background scale based on browser width by applying
body {
background-size: cover;
background-repeat: no-repeat;
}
2) You can make all measurement units based on vw units similar to this:
Font scaling based on width of container
for instance, if you want your fonts to scale proportionate to your width, you can set
body {
font-size: 0.835vw; //around 14px at 1920px
}
Another example is if you want a container that is 300px high at 1920px width to scale based on width, you can make that container
.container {
height: 150vw; //around 300px at 1920px
}
Presumably you are not trying to keep the footer at the bottom at all sizes? Otherwise you can just use position:fixed; on the footer.
Also, if you keep a fixed aspect ratio, you are going to have very funny spacing if the browser height is taller than the width. Are you sure this is what you want?
Keep in mind, this is a very odd way to resize content which could result in performance and readibility issues (which you are aware). Most people would recommend just using a meta tag for devices, or making your elements responsive.
I have a website, that is responsive (has a separate media query for mobile). It looks great on portrait orientation, but messed up on landscape, so we wish to disable landscape orientation for mobile devices (Android & iOS at least) before we fix it. I tried to do so with vieport meta tag, but it doesn't do much, except shows me correct zoom and doesn't allow user to scale, but still allows to change orientation.
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
How can I achieve such effect?
The only fix I can come up with, is to rotate your body or a wrapper according to window.orientation
$(window).bind("orientationchange", function(){
var orientation = window.orientation;
var new_orientation = (orientation) ? 0 : 180 + orientation;
$('body').css({
"-webkit-transform": "rotate(" + new_orientation + "deg)"
});
});
This is a risky way but thinks its the only way.
Alternative you can bind to the window resize event.
$(window).bind("resize", function()
I have a fixed-width site (980px) where we have been asked to remove the right hand sidebar on smaller devices. (Devices where the screen size is less than 768px, say.)
This means that effectively, we're running two fixed-width sites from the same codebase.
We're using the following meta tag in the site:
<meta name="viewport" content="width=device-width,initial-scale=1">
The problem is that on larger tablets, we're seeing the full site (as we should), but zoomed in. (Because the tablet is considering full width to be - say - 768px and is zooming accordingly.)
I cannot set width to be a fixed size:
<meta name="viewport" content="width=980,initial-scale=1">
...because smaller devices will then zoom out too far.
Is there any workaround that will fix the zoom-level properly for all devices?
(n.b. I am aware that the basic idea is wrong here.)
OK, so I've managed to get this up and running.
Start by setting width=device-width to ensure that the correct "responsive" version loads. Give the metatag an ID so that we can easily grab it later.
<meta id="viewport" name="viewport" content="width=device-width"/>
Then, we want to check the screen size so that we can force the width and zoom to right size:
(function($){
$(function(){
if (window.matchMedia !== undefined) {
var mq = window.matchMedia("(max-width: 767px)");
if (mq.matches) {
$('#viewport').attr('content', 'width=767');
}else{
$('#viewport').attr('content', 'width=980');
}
}
});
})(jQuery);
I noticed that setting initial-scale in any way broke zoom.
Note that I'm using window.matchMedia here, which although not fully supported, is fine for my purposes. If you need to support a greater percentage of users, you might consider using Modernizr.mq instead.
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