.NET Tutorials, Forums, Interview Questions And Answers
Welcome :Guest
 
Sign In
Register
 
Win Surprise Gifts!!!
Congratulations!!!


Top 5 Contributors of the Month
david stephan

Home >> Forum >> ASP.Net >> Post New QuestionBookmark and Share Subscribe to Forum

How to set device width dynamically

Posted By: subash     Posted Date: July 19, 2011    Points:5   Category :ASP.Net
Hi ,
Currently i have an web application for mobile devices which i wants to run in various devices.I want to set the width dynamically based on mobile device width.Any idea about this really appreciable.

Regards
Subash





Responses
Author: Dhiraj Ranka             
Posted Date: July 20, 2011     Points: 20   

Hi,

Check the SDK and try and get the device dimension and accordingly set the width of your screen. You could use any of following

Application.Current.RootVisual.RenderSize

Or

System.Windows.SystemParameters.PrimaryScreenWidth
System.Windows.SystemParameters.PrimaryScreenHeight

which ever is applicable to your current version of SDK.

Hope this helps.

Thanks & Regards,
Dhiraj Ranka
http://www.twitter.com/dhirajranka | http://www.dhirajranka.com
Author: Sasi Prabhu             
Posted Date: July 29, 2011     Points: 20   

try :


<meta name = "viewport" content = "width = device-width, height = device-height" />


or


foreach (string item in HttpContext.Current.Response.Headers.Keys)
{
Response.write(item + " : " + HttpContext.Current.Response.Headers[item]);
}




Thanks & Regards,
Sasi Prabhu.
Author: Gowthammanju             
Posted Date: July 29, 2011     Points: 20   

let ur html look like

<body>
<div id="wrapper">
<img src="small-image.jpg" />
</div>
</body>


css as

@media screen and (max-width: 480px) {

div#wrapper {
max-width: 100%;
overflow:hidden;
}
img {
max-width: 100%;
}

}


Thanks & Regards,
GowthamManju
Chennai



Mark if the answer is true
Author: Gowthammanju             
Posted Date: July 29, 2011     Points: 20   


Set the viewport for your device

<meta name="viewport" content="width=device-width" />
<script type="text/javascript">
if (window.innerWidth < 500) {
// Phone
document.querySelector("meta[name=viewport]").setAttribute('content', 'width=480');
}
else if (window.innerWidth < 650) {
// Tablet
document.querySelector("meta[name=viewport]").setAttribute('content', 'width=670');
}
</script>



Add custom styles for that viewport


@media screen and (max-width: 500px) {
/* Phone Styles */
}
@media screen and (max-width: 700px) {
/* Tablet Styles */
}


Thanks & Regards,
GowthamManju
Chennai



Mark if the answer is true


Post Reply

You must Sign In To post reply
 
 
Find more Forum Questions on C#, ASP.Net, Vb.Net, SQL Server and more Here
Quick Links For Forum Categories:
ASP.NetWindows Application  .NET Framework  C#  VB.Net  ADO.Net  
Sql Server  SharePoint  OOPs  SilverlightIISJQuery
JavaScript/VBScriptBiztalkWPFPatten/PracticesWCFOthers
www.DotNetSpark.comUnAnsweredAll

Hall of Fame    Twitter   Terms of Service    Privacy Policy    Contact Us    Archives   Tell A Friend