I am developing a website using Bootstrap v3.3.5. I want the website to zoom in and zoom out like it is an image and not auto arrange itself. How do I do that?
You can achieve this by disabling the responsiveness of bootstrap
Steps to disable page responsiveness
Omit the viewport <meta>
<meta name="viewport" content="width=device-width, initial-scale=1">
Override the width of the .container for each grid
If using navbars, remove all navbar collapsing and expanding behavior.
Related
Every time you load the site there's this little loading, like changing its color
I tried: <meta name="theme-color" content="#000000"\>
I've made a website. It looks nice when using PC, but not good when using smartphone (Too small). Is there anyway to fix that?
Here is my website: https://hai-weather-forecast.herokuapp.com/
Did you try to add the responsive meta tag in the head element?
<head>
...
<meta name="viewport" content="width=device-width">
...
</head>
Here is the background docs
I tested by open the url you provided, setting the same device size with developer tools, and adding that meta tag in the head element editing the html by hand.
Beffore adding meta tag
After adding meta tag
Cheers!
i have programmed a website, for a client and now im developing a smartphone template.
I used max-device-width as media query to separate smartphone and tablet.
Everythng is working fine, but iphone 4 zooms the website.
I dont know if i defined viewport wrong or is a bug?
Website is:http://mksgmbh.com
I used following Viewport
<meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, target-densityDpi=device-dpi' name='viewport' />
<meta name="viewport" content="width=device-width" />
I tried to set initial-scale to 1 but it doesnt work too.
As I look at the site now you have mulitple viewport tags. Try removing them all and replacing them with either
<meta name="viewport" content="width=device-width, initial-scale=1.0">
or if you want to prevent user zooming:
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0">
UPDATE
Also, in you media queries you use max-device-width, e.g.
#media only screen and (max-device-width: 760px) {
...
}
Unless you are trying to target specific devices, you could try just
#media only screen and (max-width: 760px) {
...
}
Device width and width aren't the same thing and for responsive design, width will usually get the results you want. This link has some more background info about the differences
Hope this helps!
I know this question has been asked many times and has different solutions, but I have a different problem.
<meta content='True' name='HandheldFriendly' />
<meta content='width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;' name='viewport' />
<meta name="viewport" content="width=device-width" />
If i add the above code to my aspx page, the page zooms automatically to max size. How do I fix this? With out the above code, the web page zooms only on text box focus. I have used a liquid CSS layout for my web page.
i want to answer the question but need more information.
do you want to disable zoom?
if so do you want it default zoomed in OR default zoomed out.
mobile doc type helps :
!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.2//EN" "http://www.openmobilealliance.org/tech/DTD/xhtml-mobile12.dtd"
if you do not want to disable zoom let me know what you are trying to do or please link to your url.
We have a web application written with JSF and are trying to add a mobile version to it. Ideally, we'd have a separate folder with templates, CRUD and resources (e.g. jQuery Mobile) and our landing page would be able to choose the appropriate template based on the user-agent attribute of the header.
One way would be to use a scriptlet and redirect to mobile/index.xhtml - end of story, but people don't like scriptlets :D
Another way would be to wrap the content of the landing page (includind the templated parts) in a panelGroup with rendered="#{mobileDetector.isMobile()}", having a backing bean perform what the scriptlet would have done otherwise. But I think it kind of cripples the templates, plus it doesn't apply to the head section.
So - is there a better way?
Either use a separate subdomain, e.g. mobile.example.com for mobile users and (www.)example.com for desktop users, and/or sniff the user agent. There are public APIs available on:
http://user-agent-string.info
http://www.useragentstring.com
Alternatively, you can use CSS to hide/change parts of the the HTML markup based on the media type.
<link rel="stylesheet" href="css/desktop.css" media="screen,projection">
<link rel="stylesheet" href="css/mobile.css" media="handheld">
<link rel="stylesheet" href="css/print.css" media="print">
<link rel="stylesheet" href="css/iphone.css" media="all and (max-device-width: 480px)">
<link rel="stylesheet" href="css/ipad-portrait.css" media="all and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait)">
<link rel="stylesheet" href="css/ipad-landscape.css" media="all and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape)">