We have a web based LOB application and currently we are shrinking the content of the app when it goes onto a smaller resolution browser i.e. IPad, using the viewport. using javascript:
document.querySelector("meta[name=viewport]").setAttribute(
'content',
'width=device-width, initial-scale=0.8');
This works fine asthecially but it seems to produce a performance hit when the browser has to scale everything down, especially with our kendo controls (the grid takes a massive hit).
Just wondering if anyone can advice a better was to scale down the viewport without hitting any performance issues?
I'd be surprised if you're getting a performance hit from scaling the page since that happens on the GPU and is expected to be very fast.
Additionally, your viewport descriptor as-is wont scale the page unless you have content that's explicitly wider than your layout size (for example, a very wide image). The browser will automatically zoom out to show all the content on load so your best bet is to pick a good layout width for your page (e.g. width=1200) and not set an initial-scale. width=device-width will attempt to lay your page out into the size of the device's screen, which is not what you want if you're trying to scale your page down.
Related
I'm attempting to make a page that will be compatible both with a PC browser and a browser on a phone.
Essentially, I want to size my elements as large as I can on the smaller screens (ideally, even a little bit larger), while confining everything to a narrow vertical band in the center on a PC browser window.
You can see the look I'm trying for here:
http://www.hoggy.com
I've attempted to read the browser's width to tweak the data on the fly, but I find I cannot get a reliable width on all platforms.
So I've attempted to center things, and make the image and table sizes be a percentage of the page size... but on a phone it's too small (thus I would like it to be actually a little wider than the phone screen) whereas on the PC, I want my width to be, effectively, min(100%,500px).
Is there any way to do that?
Simplest answer:
html
{
max-width: 1024px
}
I have a website where there is a fixed-size, floating menu.
The menu does not change size when the browser is zoomed (well, it's shrunk back to the original size when zoomed).
The point is to be able to browser-zoom in on a big photograph while keeping a small navigational menu on top of everything.
The problem is that when one zooms in to look at details of the photograph (cmd+), the scrollbars get huge and start to take over the screen visually.
Is there any way to specify the size of the scrollbars so that they will still appear but not get so big?
The scroll bars vary throughout the different browsers and versions.
In older versions of IE this is might be a problem, but in the most recent version of Chrome it doesn't seem to be.
But as for keeping the small navigational menu, use percents to describe the CSS value of the menu so it takes up a defined portion of the page.
There are several ways to layout web pages so they fit the browser viewport (DOM window). When I say "fit" I include changing the size of the fonts used and changing the width and perhaps heights of DIVs, IMGs, and other rendered elements, as well as allowing "fluid" movements of elements. The goal is to make the page look "nice" on all display devices, from tiny phones to big desktop screens. These layout ways include using CSS em and % sizes, wrapping of text and elements, and JavaScript run by the onload and onresize events. Layout fitting can be made to work almost perfectly, cross-browser, but a sophisticated result may be insensitive to browser zooming, since zooming changes the window width magically, which means without any browser-independent, reliable way to detect the zoom (DOM and CSS standards ignore browser zooming). There is no way to detect the difference between a small window width due to a small device screen versus a small window width due to a large zoom factor. We want to handle these two cases differently, since vision-impaired users need the zoom factor to be honored.
Has anyone succeeded in fitting layout really well (including changing font sizes) in a way that respects zooming? For example, if the user visits the page with a zoom of 200%, initially only the upper left quarter of the page should be shown (the rest being available by scrolling horizontally and vertically), while the same page would fit into the window perfectly for another user having their zoom set to 100%.
Indeed to have a fluid layout you will have to use % to determine the width instead of pixels.
And for fitting the screen use 100%
Just add the following metatag
<meta name="viewport" content="width=device-width,
initial-scale=1.0,
maximum-scale=1.0,
user-scalable=0">
I have a website using the meta tag <meta name="viewport" content="width=device-width, target-densityDpi=device-dpi">, Javascript that formats the css for body to screen width and height, and elements inside that have percentage-based widths.
On desktop, this works fine. On my Android phone and tablet's browsers, though, the content isn't scaling properly - everything is just a little too small, and double-tapping to zoom zooms in to the right size (while not displaying the entire page width). This happens both in portrait and landscape mode, and the zoom level appears to be identical, or at least similar.
I have an alert come up telling me what the javascript has formatted body width and height to, and it is always right, but the browser feels the need to load as though the size of the window was actually larger.
I understand there's some nonsense where browsers get confused between CSS pixels and real pixels, but I thought the meta tag there was supposed to fix all of that.
So how do I make the browser load the page to a real 100% screen size, and not some sort of ~125% size?
Add
user-scalable=no
to your viewport meta-tag, this (at least in my tests) forces the browser to display at the width specified instead of the user/browsers preference.
it it possible to resize the browser window width to fit 2 monitors through JavaScript ?
Let's say we have 2 monitors with same resolutions : 1280x760.
is it possible to expand the width of the browser to fit 2 monitor? that 1280 X 1280.
thanks.
Firstly: Don't do this! Your users will hate you for it.
Secondly, there are a number of possible configurations possible for users who have more than one monitor.
Some users will have them set to be treated as a single extra-large display; others will have them working more independantly of each other. A colleague of mine has a display-splitter hardware which means that although he has two monitors, the PC only sees one, so when he maximizes his windows, they cover both screens. My set up on the other hand is different; when I maximize, the window expands to fill a single monitor.
Some users will even have different monitor sizes and different resolutions betweeen their monitors. I know one person who has one monitor in landscape mode, and the other rotated 90 degrees in portrait mode.
A lot of these things will make it phyically impossible to have a window that is maximized across all monitors, so even if you could make it work for some users, it wouldn't work for everyone.
Assuming you do manage to get the browser window stretched across both monitors, you now have the problem of working out how to layout your page without your text and graphics being split by the edges of the monitors. Your browser won't know where the monitor edges are, so you could easily end up with important parts of your page content being broken in half which could make your site virtually unreadable.
Even if you know in advance exactly what the user's screen resolution is going to be, you still have this problem because you don't know what the user's browser window looks like. They may have the history or bookmarks side-panels open. Their desktop settings may be different too; they may have their Windows taskbar aligned on the side of the screen rather than the bottom. None of these things are in your control, and will affect the screen space available to your browser, which in turn means you can't predict where the edges of the monitors will be even in an environment where you know the screen resolution.
In short, I don't believe it's possible, and I don't believe it's desirable. I strongly recommend not doing it.
To quote from David Flanagan, "Javascript, The Definitive Guide" (5th edition), Section 14.4.3:
"The Window object defines methods that move and resize a window. Using these methods is typically considered very poor form: the user should have exclusive control of the size and position of all windows on her desktop. Modern browsers typically have an option to prevent JavaScript from moving and resizing windows, and you shuld expect this option to be on in a sizable percentage of browsers" (emphasis added)