I am working on a Chrome extension and I am running into the following issue. I would like to resize a tab to a specific width and height, but want to override the automatic resizing of elements. So I figured I should either somehow override the onresize event or instruct chrome to render the page while manipulating the (perceieved) viewport.
For some reason I cannot find anything to perform the former and on the latter, I have found a lot of information on the meta viewport tag but for some reason cannot make it work.
See also: Dynamic viewport and Can I change the viewport meta tag in mobile safari on the fly?
To give an example how do I render this page as if it was in a window(/tab) of e.g. 600 pixels wide even though the actual tab is 1200 or whatever amount of pixels wide (and being resized, either programmatically or manually)?
Example:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<meta name="viewport" id="viewport" content="width = 600, height = device-height, maximum scale = 1.0, minimum-scale = 1.0">
<title>Viewport testing</title>
</head>
<body>
<div style="width: 90%; border: solid 3px;">Current Viewport: <script>document.write(document.documentElement.offsetWidth.toString());</script> pixels</div>
</body>
</html>
The 600 is completely ignored and the div resizes while resizing the tab/window.
Am I overlooking something in the Chrome API?
The goal of this particular function of the extension is to be able to select an element (e.g. a div) or region (with crosshairs) of a webpage and resize the tab to show just that. I have everything working fine (selection etc, resizing and scrolling , detecting the element size etc etc) but obviously all responsive elements would be changed upon a window resize. I want to prevent that from happening.
Thanks
Related
So, there is an app that links to two different webpages.
The first one is made by me, it is responsive so when it is loaded on a phone everything fits nicely.
The other one is made by the company i work for and is not responsive.
Now I am supposed to add a bar at the top of both pages and when they are loaded in the app the bar needs to have the same size for both pages. I can not change anything on the non-responsive page, only the bar at the top.
Lets take 900px and 360px as an example, one page scales down to fit on 360px for the iphone and the other stays on 900px width so it is scaled down to fit on a mobile screen by the phone.
http://imgur.com/6tV1IDT
I need to make a bar for the 900px width one that always have the same height as the one on the 360px width page even if it is scaled down by different phones. (scaling down to differnt widths/heights)
Is there any way to set the height of an element to be ignored by phone scaling even if the rest of the page is scaled?
I think if you just define width: 100%; for that bar it should work, also on the non-responsive page.
Try adding this to the head of your document <meta name="viewport" content="width=device-width, initial-scale=1">. As your question is horribly written it's hard to even understand what you want or trying to fix.
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The rest of the head below... -->
</head>
I know this was not worded so it was easy to understand but maybe someone will search something similar and end up here anyway so here is the way i solved it.
//get the width of the browser without the scaling
//if the window is smaller than 260 my paged stopped scaling and started to use a horizontal scrollbar instead
//the minimum depends on your webpage I think. (Change the 260 to the minimum width of your page.
currentWidth = screen.width > 260 ? screen.width : 260;
//get the relative size depending on the size of the non-scaling webpage.
//The page I worked with had a width of 1050.
//If the browser is wider than the page set the size to 1.
relativeSize = screen.width < 1050 ? (1050/currentWidth) : 1;
After you got that value you can use relativeSize * (the size you have when it is not scaled) and it will end up being the same size even if the page is sized down.
I set it to the onLoad and onResize events and resized my header whenever the page size got changed. i.e. when someone flips a phone over you might want to resize again.
EDIT: screen.width instead of window.outerWidth to get it working on iphone.
I haven't tested it on an android device yet because I don't have one, but when I visit my site on my iphone it looks like the image below. I can't figure out why it loads like that. The site is completely responsive, and I have this in the header:
<meta name="viewport" content="width=device-width, initial-scale=1">
Inside the <header> element of your site, in this div:
<div class="header-ads f-right">
There is a 728x90 google ad, which although it is not visible on your page, is still there and is widening your page and making the rest of your content scale down.
Removing that google ad fixes the issue.
Usually this is because there is some element on the page which is wider than your main content column. Later iPhones tend to zoom out to accomodate this additional content.
Check all the element widths and ensure that none are hard coded values. Use width:100% for full width responsive content.
On my website, I have a mobile version for devices below 980px, however I would like devices blow 570px only to see this and if they rotate their mobile device, for them to then be able to see the full site with their device scaling if needed.
Change my pages width to see the mobile version. This is what I want devices to see on portrait mode but in landscape I would like them to see full version. I thought about implementing tilt detection, however nowadays you can get 27" all-in-one touch computers which can tilt!
If you don't have the viewport tag included, then the page will render using the device resolution. That means it will likely return 980px not the css pixels you're expecting. This is the default value of most mobile browsers (on Android and iOS devices at least). So, trying to add the viewport tag by checking if the width of the window is less than 570px without already having the viewport content tag set to "width=device-width" would be fruitless. This is why your first attempt did not work.
Also, if you try and remove the viewport tag AFTER the page is already rendered (for instance, inside a $(document).ready(function () {}); it would remove the tag, but the page would be unaffected.
However, you can set the viewport tag to have a different content value. So, in this case, you'd include the <meta name="viewport" content="width=device-width, initial-scale=1.0"> on the page, then in your document ready, use jQuery to set the content attribute to default width value of 980px instead. Because the DOM is ready when you are checking the width of the window, changing the value of the content attribute will cause devices that honor this property to render the page at the default 980px. (This is horribly small on my iPhone5 and impossible to use, but you stated that you find it acceptable.)
//add this to your document ready function and make sure
//that the viewport is initially set to content="width=device-width"
var pageWidth = $(window).width();
if (pageWidth < 570) {
$('meta[name="viewport"]').prop('content', 'width=980px');
}
Why you don't have to worry about resize events:
For most current devices that you are targeting, the window width is not resizable and the resize event will not be triggered on orientation change because it's not a change in the width of the browser, rather it's a change in zoom level. On your desktop, however, the browser won't even care about the viewport meta tag at all, so, no matter what value you have there, it doesn't affect the behavior.
My website has responsive design, I am loading a page in mobile browser in which many images are displayed one below another. It looks fine, when orientation is changed then everything is resized and displayed properly but different content is shown than what was shown before changing orientation
For example, if there are 5 images displaying one below another in mobile browser and currently 2nd image is displaying and then after changing orientation it shows 3rd image instead of 2nd
I am currently using this::
<meta name="viewport" content="width=device-width, initial-scale=1" />
Plese help
For flexible layouts it’s more practical to base your viewport width on the device in question without setting the zooming parameter. Try the following instead:
<meta name="viewport" content="width=device-width">
What is viewport in HTML? Could you give some examples on how to access the viewport details?
The viewport is the part of the webpage that the user can currently see. The scrollbars move the viewport to show other parts of the page.
Follow this article's instructions to get the viewport dimensions in Javascript.
if (typeof window.innerWidth != 'undefined')
{
viewportwidth = window.innerWidth,
viewportheight = window.innerHeight
}
I think the ViewPort is just an area to display the web content in the browser. And different browsers have their own setting for the size of ViewPort, For example, the default ViewPort width of Safari is 980 pixels. So, if the actual web page you want to see is smaller than 980 pixels, there should be a blank display area in the Safari when accessing the web page in the Safari by default. Hence, that is the reason sometimes we need to configure the ViewPort for better web content display in the browser.
Like below, for example:
<meta name="viewport" content="width=device-width">
And also please read Paul's answer. I think he already explained the usage of ViewPort.
The viewport is a virtual area used by the browser rendering engine to determine how content is scaled and sized when it is initially rendered on the current screen. This will help you:
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
The viewport is the visual area of your webpage on a browser.By using the <meta name="viewport" you can set how the content of your site is rendered on different devices.
Personally I like to use :
<meta name="viewport" content="width=device-width, initial-scale=1.0>
The viewport area is the user-visible area on the device,
the meta tag is used to set page content width as per viewport so that the content of the page will be scaled down or up as per the viewport width.
A good explanation at MDN [https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag].