|
HTML - Scale To Device Width Not Working
Hello all. I hope you can help me with the following problem with the mobile version of http://thekind.tk, my band's website.
(direct link for desktops) As you can probably see, the website isn't that big but on my ipod it appears zoomed out. Of course the first thing I tried was putting this line between my <head>: Code: <meta name="viewport" content="width=device-width, initial-scale=1.0"/> But somehow this doesn't do anything for me. Even if I play with the parameters such as putting the scale at 2 or 3, the whole meta thing doesn't seem to affect my site's viewport at all. Any ideas on how to solve this? Similar TutorialsI created a JSP with a table and for the columns in td I have width as percentage. This works perfectly in Firefox But IE gives different width. Here is the part of jsp relevant to this table. <tr> <td id="event" width="14%" ><%= StringUtil.removeNull(eventVO.getEvent()) %></td> <td id="eventDate" width="14%"><%= StringUtil.removeNull(eventVO.getEventDate()) %></td> <td id="createdBy" width="12%"><%= StringUtil.removeNull(eventVO.getEventCreatedBy()) %></td> <td id="server" width="11%"><%= StringUtil.removeNull(eventVO.getServer()) %></td> <td id="fileName" width="20%"><%= StringUtil.removeNull(eventVO.getFileName()) %></td> <td id="fileGroup" width="8%"><%= StringUtil.removeNull(eventVO.getFileGroup()) %></td> <td id="count" width="6%"><%= eventVO.getNumberOfTimesChanged() %></td> <td id="note" width="15%"><%= StringUtil.removeNull(eventVO.getNote()) %></td> </tr> Thank you. Hello, If I measure height and width in % instead of pixels then it does not work in firefox. It only ends up displaying only small region of iframe instead of specified size. But this works perfectly fine on IE. Below is the code. <iframe id="theFrame" name="iframes" src="http://www.abc.org" align="top" height="94%" width="96%"></iframe> Thanks, Ruchir Hi, I am having problem to make min-width woking with all browsers, the following page: http://codeturtle.com/files/min-width.html works as expected with FF, IE9, IE8, but does not work well with Chrome, IE 9 Compatibility mode (IE7) or IE 9 Quirks mode (IE6). I need to make it to work with all browsers and I don't want to use width. Thanks I have a DIV that is a fixed size. I want to display a JPG within the div that is stored elsewhere. The problem is the jpg used can change and can be any size. What I want to try and achieve is to scale this jpg so it fits within the div but still maintainig its original proportions. Is there anyway to do this using HTML and CSS, or do I have to use JS? Thank you for any help in advance. Hi, I'm looking for a way (any way, could be html, css or javascript) to make an image to be scale down only. Here is what I means: if I have something like Code: <img src="picture.jpg" width="100%" alt=""/> it will fill the full space it can occupy (let say the whole viewport). Now if I have image with width resolution of 800px, and my viewport is 1024px, it will be scaled up, and if the viewport is 640px, it will be scaled down. What I want is that if the viewport is 1024px, it is not scaled at all (remain at the original resolution, that is 800px). But if the viewport is less than 1024px, than it will be scaled down to fit. Is there a way to do this? i have a floating div who's height is determined by content, i would like acquire that div's hight and apply it's hight to a div on the page, when the page loads... If I'm using basic html/css stuff and tables, how do I get it so my graphics and everything on my site scales properly to the viewers screen resolution? Any tutorials on this? thanks! This is for a flash site but I think it needs to be coded in the html page. My Flash swf size is approximately 1000x700. If the browser size is smaller than this the site needs to scale down but if it is larger I don't want it to scale. Just like this http://www.milesaldridge.com/. I've tried publishing the Flash settings at ScaleDefault(Show All) which scales it but I need to stop the scaling upwards at 1000x700. I'd have thought that I could say in the html if (width<1024){scale;} and if(height<700){scale;}. But it's not working. Should it all be done in the html and if so how? Ok, I've been designing this site: www.patbianco.com.au and I have small problem I havent been able to solve. The design is specifically for an ipad, and I''ve been using the ipadpeek.com site to help me to check the site aswell as a borrowed ipad. The site works great landscape, but once turned to portrait it gets scaled, the header should be the width of the screen. It's not just he header that is scaled, its the whole page. Here a screen shot of landscape: http://i53.tinypic.com/2sb4dhe.jpg Here a screen shot of portrait: http://i52.tinypic.com/2lj5pau.jpg Portrait CSS: http://pastext.net/2550 HTML: http://pastext.net/2551 Thanks In advance if anyone is able to help me. Hopefully there is, as I'm on a deadline Hey all, http://www.lindesigns.us/rma/rmaonline.php If you go to that site on Firefox, the "Return Code #" expands. But if you use IE, you'll see that it doesn't. I could add a fix in there for the fields if they were static, but if you see my javascript, they are dynamically loading fields. This "class":"wide" is not working: Code: invoiceInput.appendChild(createElement("input", {"type":"text", "name":"invoice[]", "size":"8", "class":"wide;"}));
I am using a script I found on a jQuery board (http://jsbin.com/acado/6), and it works for them, but not for me because my syntax is probably wrong. And they also are just using 1 field and not near-unlimited dynamically loading fields like I am. How would I add in a fix to have the browser 'only' use the expansion if the user is using IE6 or IE7? I searched on the boards but couldn't find the solution to this problem. Thanks in advance! Basically I want to put this page "http://3d-story.com/Old-Afgan.html" into a 3rd party widget. When I place this 3rd party widget on my page I can scale the widget frame to any size I want, but the page within it doesn't scale. Looks like this "http://www.wix.com/mettam/test" What code do I need to put into my HTML code so that it will scale to the frame of the widget ? Here is an example of my code with in the widget. Code: <html>
<head>
<title>Old Afgan</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<!-- ImageReady Preload Script (Old Afgan.jpg) -->
<script type="text/javascript">
<!--
function newImage(arg) {
if (document.images) {
rslt = new Image();
rslt.src = arg;
return rslt;
}
}
function changeImages() {
if (document.images && (preloadFlag == true)) {
for (var i=0; i<changeImages.arguments.length; i+=2) {
document[changeImages.arguments[i]].src = changeImages.arguments[i+1];
}
}
}
var preloadFlag = false;
function preloadImages() {
if (document.images) {
Old_Afgan_03_over = newImage("images/Old-Afgan_03-over.gif");
preloadFlag = true;
}
}
// -->
</script>
<!-- End Preload Script -->
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" onload="preloadImages();">
<!-- ImageReady Slices (Old Afgan.jpg) -->
<table id="Table_01" width="977" height="695" border="0" cellpadding="0" cellspacing="0">
<tr>
<td colspan="3">
<img src="http://3d-story.com/images/Old-Afgan_01.gif" width="977" height="82" alt=""></td>
</tr>
<tr>
<td rowspan="2">
<img src="http://3d-story.com/images/Old-Afgan_02.gif" width="190" height="613" alt=""></td>
<td>
<a href="#"
onmouseover="changeImages('Old_Afgan_03', 'http://3d-story.com/images/Old-Afgan_03-over.gif'); return true;"
onmouseout="changeImages('Old_Afgan_03', 'http://3d-story.com/images/Old-Afgan_03.gif'); return true;"
onmousedown="changeImages('Old_Afgan_03', 'http://3d-story.com/images/Old-Afgan_03-over.gif'); return true;"
onmouseup="changeImages('Old_Afgan_03', 'http://3d-story.com/images/Old-Afgan_03-over.gif'); return true;">
<img name="Old_Afgan_03" src="images/Old-Afgan_03.gif" width="497" height="251" border="0" alt=""></a></td>
<td rowspan="2">
<img src="http://3d-story.com/images/Old-Afgan_04.gif" width="290" height="613" alt=""></td>
</tr>
<tr>
<td>
<img src="http://3d-story.com/images/Old-Afgan_05.gif" width="497" height="362" alt=""></td>
</tr>
</table>
<!-- End ImageReady Slices -->
</body>
</html>
How do you make a page (my home page) that will recognize that the person is on a mobile device (mostly ipod/iphone but regular phones too) and redirect to a wap page? Like wap.dawgtalk.com? Can this be done in a html page? And how do you do it? The first part , this page i need to put an widesky ad on both sides of the image & also want something that will rescale image to fit page as i need to fit in large images on the page , can this be done people? im creatinh a box containing a text. The box must be wide enough to fill a text. menu.style.width = tekst.length - this functioin gives the number of letters in text. So if the text is "hello" then the width is 5 pixels. But i need the widith of pixels needed to fit the text in a box. How can i do that? Hi, Is there away to force my website to fit an Iphone screen when viewed on the iphone. At the moment the width doesn't full span the Iphones screen so it looks bad. http://pjm.co.uk.uksite4.yourwebserv...splay&PageID=5 Thanks alot Joe Does anyone know the average width of a screen in html code? I'm using a widescreen labtop to create a website, and I'd like to design it for the normal size screen. Hi, I'm having an issue with a table that I could use some help with. Code: <table width="10"> <tr> <td width="10">ABCDEFGHIJKLMNOPQRSTUVWXYZ1234567890!@#$%^&*()_+/*-+</td> </tr> </table> As you can see, the letters contained in the <td> when printed are much wider than 10px, but because there are no spaces between the text, it stretches past 10px. I'm trying to find a way so that even though there are no spaces dividing the text, the text still stays within 10px width and doesn't stretch the table. I've tried fixed width and max-width, neither worked. Any suggestions? Hey all. This is my first post on this forum and I'm new to HTML and CSS, so please bear with me. I apologize if it's in the wrong forum. I've got a problem with my HTML code (I combine HTML with CSS). Imagine I have a navigation bar on the left that takes up 10 'em's. Just to the right of that navigation bar is the space that contains the actual content of the page (separated by <div id="actualcontent"> </div> tags. Works just fine... till I define a table within that content tags. The table is almost always too large (a horizontal scroll bar appears) or too small. I want the table to fill exactly 100% of the width of the "<div id="actualcontent"> </div>" tags, not 100% of the width of the whole window (which would include the navigation bar). Code: <table width="100%"> </table> makes the table as wide as the window. Yet, I want it to be only as wide as its parent (the actual content). I do not want to set the width to something like "80%" and HOPE that the size is okay and no horizontal scroll bar shows up. Because it could be too much or too less once the user resizes the window. However, if I specify the width in pixels or 'em's (in CSS) I'll have the same problem: I can never be sure that the table will fill out EXACTLY 100% of its parent, the width you specify seems to always be the width in relation to the whole window. Is there a solution to my problem? Thanks in advance , AvoC Hi all, I want my table to have 100% of the screen width. But when the text inside is to big, the table is wider than the screen. My table info is: <table border='1' bordercolor='darkgrey' width='100%' cellpadding='3' cellspacing='0'> I also want, that all 8 columns have the same width according to 100% from the table. What can I do? Mfg, DerTobi Hi, ive been trying to solve the image in the table but couldnt get it right.. I need help from you guys.. kindly see the attached image for the error: and this is the HTML code HTML Code: <table cellpadding="0" cellspacing="0" border="0" width="600px" bgcolor="#FFFFFF">
<tr>
<td width="34">
<img src="{/document/config/static-image-url}3_1_3.gif" alt="" border="0" width="34" height="116" />
</td>
<td>
<table cellpadding="0" cellspacing="0" border="0" width="268" bgcolor="#FFFFFF" height="116">
<tr>
<td align="left" width="268" bgcolor="#FFFFFF">
<span class="price1" style="color:#000000;font-size:12px;font-family:Arial;font-weight:bold">
<xsl:call-template name="fixLines">
<xsl:with-param name="inText" select="/document/page/field-set/field[tagname = 'text_15']/value" />
</xsl:call-template>
</span>
</td>
</tr>
<tr>
<td align="left" width="268" bgcolor="#FFFFFF">
<span class="price1" style="color:#000000;font-size:12px;font-family:Arial">
<xsl:call-template name="fixLines">
<xsl:with-param name="inText" select="/document/page/field-set/field[tagname = 'text_16']/value" />
</xsl:call-template>
</span>
</td>
</tr>
</table>
</td>
<!-- the error image which needs to be aligned-->
<td>
<img src="{/document/config/static-image-url}3_1_5.gif" alt="" border="0" width="61" height="116" />
</td>
<!--END OF the error image which needs to be aligned-->
<td align="left" width="290" bgcolor="#FFFFFF" valign="top">
<span class="price1" style="color:#000000;font-size:12px;font-family:Arial;font-weight:bold">
<xsl:call-template name="fixLines">
<xsl:with-param name="inText" select="/document/page/field-set/field[tagname = 'text_17']/value" />
</xsl:call-template>
</span>
</td>
<td>
<img src="{/document/config/static-image-url}3_0.gif" alt="" border="0" width="100" height="116" />
</td>
<td>
<img src="{/document/config/static-image-url}3_1_4.gif" alt="" border="0" width="32" height="116" />
</td>
</tr>
</table>
Hope to get a response asap.. thank you guys, Regards, Ed |
|||||||