I want to disable the text zoom feature in the clients browser for certain sections of my website. Is this possible? Can I code the webpage for a specific font size which is not resized when the client chooses to do so?
Related
Is there a way to force a certain tab to render, even without currently being the active tab?
The reason i need to do this is because my extension uses chrome.tabs to open multiple tabs and switch between them, and whenever I switch to a tab which has not yet been active, the tab has not rendered yet, which causes a white flash to appear on the tab until the tab renders. The duration of the white flash is also proportional to how heavy the web page is to render.
What I've noticed though, is that if you switch to a tab which was active at least once in the past, the white flash does not appear (since it has been rendered at least once in the past)
I need to force a tab to be rendered before switching to it, so that the white flash doesn't appear.
I am writing on chrome version 38 (due to technical restrictions)
Thanks
No. You can't control it.
The white flashing is indeed an annoying known issue.
The only wild idea that can be implemented right now:
create a new minimized window with a blank url or about:blank,
move the tab you need into that window via chrome.tabs.move
now that the tab is active Chrome should render it even in a minimized window
then after a while move the tab back and activate it
in case that you have no choice and had to do css image resize (in my case about 20% smaller than natural image size) browser addons like Hoverzoom for Google Chrome, or Thumbnail Zoom Plus for Mozilla would show popup when you hover over that images.
I want to prevent that behaviour because it totally change user experience in one my UI form.
I understand that there is options to analyse all that addons and how they works, eg. use some event (onmouseover/mouseover) steal src tag - analyse - add some layer, id, class...
Eg. inside Hoverzoom addon for Google Chrome we can find some parts like:
z-index:2147483647
or
$('<div id="hzImg"></div>').appendTo(document.body);
and temporarily solution to disable only that addon is to hide that layer with
#hzImg{display:none!important;}
but it's not way to go because there is many addons like that.
My question is what is your opinion, or solution how to prevent all that browsers type addons to show popups when user mouse hover over css resized images?
Thanks.
I have a 1900px-wide web page at https://zackel.com/50/a0.html that I'd like to display as intelligently as I can on smaller screens, say 1024 x 768. If you show the page now on a 1024-wide screen the left side is cut off and there's no scroll bar to go over and see it.
I've been using
http://www.infobyip.com/testwebsiteresolution.php?url=https%3A%2F%2Fzackel.com%2F50%2Fa0.html&width=1024&height=768&in_browser=true
to view the page on various screens.
How can I get browsers to scroll over to the left to see the Box 1 and Box 2 content there?
Or what do I have to do to the HTML/CSS to get it to adjust on load to a smaller screen?
Thanks
You need a responsive/fluid width design , also if by chance you are using firefox , you can change the resolution of your browser window by pressing CTRL+SHIFT+M
Couple of responsive HTML5 frameworks that might be of help to you --
http://foundation.zurb.com/
http://getbootstrap.com/
I know this type of question has been asked many times before but I haven't found an answer to my specific issue yet so I thought i would post.
It's really a bit of a quirk I guess rather than anything else but I have designed a responsive site that resizes nicely in a browser when you resize the window and works perfectly when you load it up in either portrait or landscape on a mobile. However when you load it in portrait and then turn the mobile into landscape some mobile browsers don't load up the correct styling for the new screen size - BUT IT DOESN'T HAPPEN LIKE THIS FOR ALL BROWSERS! So far I have tested it on an Android 4.0.4 version phone using the standard Android browser and it resizes correctly when switching orientations but then on the same phone using google chrome as the browser it applies different styling BUT if you refresh the page it then applies the correct styling.
So my question is how can I force the mobile browser to render the page correctly on orientation change without having to reload the page?
The site in question is www.the-baobab.co.uk and im using the viewport meta tag and setting it to width=device-width and an initial scale of 1 then calling media queries at certain max pixel widths to alter positioning and layout for various different screen sizes which can be seen in my stylesheet1.css here
Is it possible to adjust the "size" of the browsers controls rendered output, ie text size or zoom out?
Im wanting a small browser visible on a form just as a preview to what a html page will render like.
so Id like it to be as small as possible
any ideas on doing this?
Not outside of badly supported proprietary land.