I've a trouble about viewing on my web site. When I visit that page
This Link
It views like this:
I wanna view the pages like this:
How can I fix this problem?
My CSS file here: style.css
I don't use media screen codes.
try adding below to your page head section
<meta name="viewport" content="width=device-width, initial-scale=1">
Try #wrapper { width: 100%; } instead of #wrapper { width: 760px; }. I can see immediate results making that single change in Firebug.
I found these codes on this page
var myViewport = document.querySelector("meta[name=viewport]");
if ($(window).width() < 800) {
myViewport.setAttribute("content", "width=800; user-scalable = yes");
} else {
myViewport.setAttribute("content", "width=device-width; initial-scale = 1.0");
}
It works fine now.
Related
I'm working with Pixel Compare extension. It works well with rvt files, and almost with pdfs.
When comparing two pdf, the viewer will zoom in on a part of the file and i'm unable to unzoom it.
Furthermore, it appears the original file is reduced to the zoomed part.
Examples:
Heres the file before comparing :
And then after, it zooms on the left corner. I cannot access the rest of the file nor zoom out.
I looked for zooming properties on the api docs, but found nothing.
Ive honestly no idea what causes it and would welcome any pointer in the right direction.
Thanks in advance.
Edit:
I load pdf this way , Autodesk.Viewing.Initializer not pictured:
viewer1.addEventListener(Autodesk.Viewing.LOADER_LOAD_FILE_EVENT, function (e) {
viewer1.loadExtension('Autodesk.PDF').then(() => {
viewer1.loadExtension("Autodesk.Viewing.MarkupsCore");
viewer1.loadExtension("Autodesk.Viewing.MarkupsGui");
});
});
Have you tried other PDFs, and is this happening to all of them?
I just tried passing two arbitrary PDF files to the extension, and it seems to work fine:
If this is just related to a specific set of PDFs you're using, I'd ask you to share those with us (confidentially, we will not share them with anyone outside of Autodesk) via forge (dot) help (at) autodesk (dot) com so that we can debug it locally.
EDIT: here's a simple example of how I initialized the extension for the screenshots above:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="https://developer.api.autodesk.com/modelderivative/v2/viewers/7.*/style.css">
<title>Autodesk Forge: Pixel Compare</title>
<style>
body,
html {
margin: 0;
padding: 0;
height: 100vh;
}
#preview {
position: absolute;
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div id="preview"></div>
<script src="https://developer.api.autodesk.com/modelderivative/v2/viewers/7.*/viewer3D.js"></script>
<script>
Autodesk.Viewing.Initializer({ accessToken: '' }, function () {
const config = {
extensions: ['Autodesk.Viewing.MarkupsCore', 'Autodesk.Viewing.MarkupsGui']
};
const viewer = new Autodesk.Viewing.GuiViewer3D(document.getElementById('preview'), config);
viewer.start();
viewer.loadModel('/path/to/one.pdf', {}, (model1) => {
viewer.loadModel('/path/to/another.pdf', {}, async (model2) => {
const pixelCompareExt = await viewer.loadExtension('Autodesk.Viewing.PixelCompare');
pixelCompareExt.compareTwoModels(model1, model2);
});
});
});
</script>
</body>
</html>
Try using this yourself, just replacing /path/to/one.pdf and /path/to/another.pdf with URLs to your own PDFs.
I currently have the following viewport for my webapp:
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, target-densityDpi=device-dpi" />
The problem with using height=device-height is that it is taking in account the entire screens height. I need device-height minus the browser GUI. As it stands, the page is about 40-50px too long. I don't want to hardcode the css to be subtracted by that amount since the GUI could be changed depending on the browser, accessibility settings, etc... Anybody have a solution?
Correct, the viewport is your complete device, including GUI.
The most simple solution; just don't set the height! Use the browsers height: 100% on html, body to get the desired absolute height.
Used a combination of answers I found in threads here
if (navigator.userAgent.match(/iPad;.*CPU.*OS 7_\d/i) && window.innerHeight != document.documentElement.clientHeight) {
var fixViewportHeight = function () {
document.documentElement.style.height = inner + "px";
if ($("input,textarea,select").is(":focus")) {
$('body').css('position', 'static');
}
else {
$('body').css('position', 'fixed');
}
};
window.addEventListener("scroll", fixViewportHeight, false);
window.addEventListener("orientationchange", fixViewportHeight, false);
fixViewportHeight();
document.body.style.webkitTransform = "translate3d(0,0,0)";
}
I'm currently working on a responsive webdesign. The "smartphone view" is not yet ready because my client has to obtain some more budget.
Therefore I need to implement a temporary view which I want to realize with an fixed viewport that only gets activated on smartphones.
I set the viewport using on this way:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
I want to change the device-width to 700 pixels if the following media query gets triggered:
#media only screen and (max-width:700px){
}
The following code did not work:
#media only screen and (max-width:700px){
.pagewrapper{
width:700px;
}
#-ms-viewport{
width:700px;
}
#-o-viewport {
width: 700px;
}
#viewport {
width: 700px;
}
}
Do you know other solutions to get this done? Maybe using JavaScript / jQuery?
The accepted answer is correct, but if you're using jQuery and jQuery needs to be ready. On slow connections you get a problem with that code, so you might get '$' undefined errors.
That's why I prefer pure JavaScript in this case:
<meta name="viewport" id="viewport" content="width=device-width; initial-scale=1">
<script type="text/javascript">
(function setViewPort() {
if (screen.width < 640 && (window.orientation == 0 || window.orientation == 180)) {
document.getElementById("viewport").setAttribute("content", "width=480, initial-scale=0.68");
//alert('480 # 0.68, landscape');
} else if (screen.width < 640) {
// document.getElementById("viewport").setAttribute("content", "width=device-width, initial-scale=1");
// disabled, since its the same as the default. if this one is different, uncomment line above
//alert('device-width # 1, landscape');
} else if (screen.width >= 640) {
document.getElementById("viewport").setAttribute("content", "width=640; initial-scale=0.5");
//alert('640, high res phones');
}
})();
</script>
In my case I set 480px with 0.68 zoom for portrait, 320px with 1 zoom for landscape so the ppl can see bigger text and (because this is a mobile only page) if screen.width is higher than 640 (like on my android 5" phone with 1900x1080 screen size) to 640px with 0.5 zoom (since the width always stays at 320px).
Regards, Max
This is my solution, which works fantastic. This way the script just runs one time and gets executed before the document is ready. Also no-js is supported. Thanks for your help.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script type="text/javascript">
if($(window).width() < 765)
{
x=1;
if(x==1)
{
$('meta[name=viewport]').remove();
$('head').append('<meta name="viewport" content="width=765px, initial-scale=1.0">');
x=0;
};
};
</script>
#media only screen and (min-width:700px){
}
You can only change your css using this type of media query. If this gets hit min-width:700px write your css w.r.t this. And change your container width e.g <div class="pagewrapper"></div>
Following meta tag is perfect:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
If you are only targeting devices, I think you could try max-device-width instead of max-width or min-width.
if ($('body').width() < 700){
$('head').append('<meta name="viewport" content="width=700, initial-scale=1.0">');
}
else{
$('head').append('<meta name="viewport" content="width=device-width, initial-scale=1.0">');
}
I would like my webpage's viewport width to equal device-width as long as device-width > 450px, or 450px otherwise (my layout dynamically scales, but doesn't look good below 450px wide).
The following two meta tags work well on tablets, where the device-width > 450px:
<!-- uses device width -->
<meta name="viewport" content="width=device-width" />
<!-- use of initial-scale means width param is treated as min-width -->
<meta name="viewport" content="width=450, initial-scale=1.0" />
however, on phones (where e.g. device-width=320px) the former is too thin for the content; and the latter causes the browser to zoom in, so the user has to manually zoom out to see the content.
Alternatively, this meta tag works well on phones
<meta name="viewport" content="width=450" />
but doesn't take advantage of the extra width available on tablets.
Any help/ideas would be really appreciated (and if it makes a difference, I'm using GWT).
So you want to change the viewport tag's width dynamicaly .
Here you go :
<meta id="myViewport" name="viewport" content="width = 380">
<script>
window.onload = function () {
var mvp = document.getElementById('myViewport');
mvp.setAttribute('content','width=580');
}
</script>
See:http://www.quirksmode.org/mobile/tableViewport.html
Try this:
<meta id="vp" name="viewport" content="width=device-width, initial-scale=1">
<script>
window.onload = function() {
if (screen.width < 450) {
var mvp = document.getElementById('vp');
mvp.setAttribute('content','user-scalable=no,width=450');
}
}
</script>
Note that I have swapped the initial-scale=1, as I think you had it the wrong way round. You want initial-scale to be set to 1 when width=device-width, so that the page fits exactly in the window. When you set a specific viewport width, you don't want to set initial-scale to 1 (otherwise the page will start off zoomed in).
use a #media tag and css. It works wonders. Although it does not supply a minimal width to the view port, this is the preferred way to go.
Here is what I do for the viewport:
<meta name="viewport" content="initial-scale=1.0, width=device-width, user-scalable=yes, minimum-scale=1.0, maximum-scale=2.0">
Then I adjust the size for the panel attached to the viewPort:
#media all and (max-width: 1024px) {
/*styles for narrow desktop browsers and iPad landscape */
.myContentPanel{
width: 450;
}
}
#media all and (max-width: 320px) {
/*styles for iPhone/Android portrait*/
.myContentPanel {
width: 320;
}
}
Obviously you can have intermediate sizes too...
here's more in another example
The JavaScript code given in the other answers doesn't work in Firefox, but it will work if you remove the meta tag and insert a new one.
<meta name="viewport" content="width=device-width, initial-scale=1">
<script>
if (screen.width < 450){
var viewport = document.querySelector("meta[name=viewport]");
viewport.parentNode.removeChild(viewport);
var newViewport = document.createElement("meta");
newViewport.setAttribute("name", "viewport");
newViewport.setAttribute("content", "width=450");
document.head.appendChild(newViewport);
}
</script>
Or just always insert it in JavaScript:
<script>
var viewport = document.createElement("meta");
viewport.setAttribute("name", "viewport");
if (screen.width < 450) {
viewport.setAttribute("content", "width=450");
} else {
viewport.setAttribute("content", "width=device-width, initial-scale=1");
}
document.head.appendChild(viewport);
</script>
For my sanity, I wrote a polyfill to just add a min-width attribute to the viewport meta tag:
Set min-width in viewport metatag
With this, you could just do:
<meta name="viewport" content="width=device-width, initial-scale=1.0, min-width=450" />
<script type="text/javascript" src="viewport-min-width.js"></script>
In short, there is no need to set min-width on viewport because you can set it on body or html element instead, to make them and their content wider than viewport. User will be able to scroll or zoom out content.
body {
min-width: 450px;
}
I did some tests in Chrome for Android and it scales fonts of some elements up if viewport width is set to anything other than device-width. Also shrink-to-fit=yes is useful to have a page zoomed out initially.
Lastly, this approach supports desktop browsers that can have strange window sizes or current zoom settings (both of which affect reported viewport dimensions), but don't honor the viewport meta tag.
Extending #Brendan and other's answer. The viewport size doesn't adjust again on orientation (portrait, landscape) change. To cater this, add an event listener on orientation change and resize again.
<script>
const resize = () => {
if (screen.width < 450) {
var viewport = document.querySelector("meta[name=viewport]");
viewport.parentNode.removeChild(viewport);
var newViewport = document.createElement("meta");
newViewport.setAttribute("name", "viewport");
newViewport.setAttribute(
"content",
"width=450, maximum-scale=1.0, user-scalable=no"
);
document.head.appendChild(newViewport);
}
};
resize();
window.addEventListener("orientationchange", resize);
</script>
I just removed initial-scale=1 and perfectly working on Android Chrome and built-in browsers. No unexpected zoom anymore! :)
<meta name='viewport' content='width=device-width'>
I have a problem after updating to iOS 6 that is driving me nuts.
It looks like any time I have the attribute "placeholder" on an input field, while rotating from
Portrait to Landscape and back to Portrait again the page shifts some pixels on the left side causing a horizontal bar.
I concluded after long research that it has to be something related to the meta viewport because every time I use the content="width=device-width" all works fine.
P.S Yes I really need to have a percent width on the input so as to have liquid design:)
Here is the example to recreate the issue. Thanks...
<html>
<head>
<title>test</title>
<meta content="width=device-width, initial-scale=1, maximum-scale=1" name="viewport"/>
</head>
<body>
<div style="width:100%;background-color:red">
<input id="testInput" placeholder="test" style="width:90%;" />
</div>
</body>
</html>
Applying "overflow: hidden;" on the containing element solved this issue for me.
I found this problem.
and fix it.
(URL : http://mooki83.tistory.com/2656550 (in korean))
testURL : http://mooki83.da.to/m/testios6.html
javascript :
/* Optimized PLACEHOLDER for iOS6 - Mooki ( http://mooki83.tistory.com ) */
$(document).ready(function(){
$(window).bind("orientationchange.fm_optimizeInput", fm_optimizeInput);
});
function fm_optimizeInput(){
$("input[placeholder],textarea[placeholder]").each(function(){
var tmpText = $(this).attr("placeholder");
if ( tmpText != "" ) {
$(this).attr("placeholder", "").attr("placeholder", tmpText);
}
})
}
CSS fix:
body>div {
overflow-y: auto;
}
Non js answer
Add overflow:hidden to parent element
and it will work like a charm