超大日历扩展器

Question

如何调整 ajax 控件工具包的 calendarextender 的大小以使其更易于触摸.

这是我目前使用的 css：

.ajax__calendar_container {padding:4px;position:absolute;cursor:default;width:450px;font-size:28px;text-align:center;font-family:tahoma,verdana,helvetica; z 指数：10000； } .ajax__calendar_body {height:360px;width:450px;position:relative;overflow:hidden;margin:auto;} .ajax__calendar_days {top:0px;left:0px;height:360px;width:450px;position:absolute;text-align:center;margin:auto;可见性：可见；} .ajax__calendar_months{top:0px;left:0px;width:450px;position:absolute;text-align:center;margin: 0 0 -5px 0;填充：0 0 1px 0；溢出：隐藏；背景颜色：#ffffff；} .ajax__calendar_years {top:0px;left:0px;width:450px;position:absolute;text-align:center;margin:-10px;overflow:hidden;}

.ajax__calendar_container TABLE {font-size:32px;} .ajax__calendar_header {高度：40px；宽度：100%； z-index: 1000;} .ajax__calendar_prev {cursor:pointer;width:45px;height:45px;float:left;background-repeat:no-repeat;background-position:50% 50%;background-image:url();背景颜色：#D3DEEF;} .ajax__calendar_next {cursor:pointer;width:45px;height:45px;float:right;background-repeat:no-repeat;background-position:50% 50%;background-image:url();背景颜色：#D3DEEF;} .ajax__calendar_title {光标：指针；字体粗体：粗体；} .ajax__calendar_footer {高度：33px;} .ajax__calendar_today {cursor:pointer;padding-top:3px;} .ajax__calendar_dayname {height:28px;width:34px;text-align:right;padding:0 4px -10px 0;} .ajax__calendar_day {font-size:20px;height:51px;width:54px;text-align:right;padding:0 4px;cursor:pointer;} .ajax__calendar_month {font-size:18px;height:45px;width:60px;text-align:center;cursor:pointer;溢出：隐藏；垂直对齐：中间；边距：-1px 0 1px 0；} .ajax__calendar_year {font-size:18px;height:46px;width:60px;text-align:center;cursor:pointer;overflow:hidden;垂直对齐：中间；}

.ajax_日历 .ajax_calendar_container {border:1px solid #646464;background-color:#ffffff;color:#000000;} .ajax_日历 .ajax_calendar_footer {border-top:1px solid #f5f5f5;} .ajax_日历 .ajax_calendar_dayname {border-bottom:1px solid #f5f5f5;} .ajax_日历 .ajax_calendar_day {border:1px solid #D3DEEF;} .ajax_日历 .ajax_calendar_month {border:1px solid #D3DEEF;background-color:#ffffff;} .ajax_日历 .ajax_calendar_year {border:1px solid #D3DEEF;background-color:#ffffff;}

.ajax_日历 .ajax_calendar_active .ajax__calendar_day {background-color:#edf9ff;border-color:#0066cc;color:#0066cc;} .ajax_日历 .ajax_calendar_active .ajax__calendar_month {background-color:#edf9ff;border-color:#0066cc;color:#0066cc;} .ajax_日历 .ajax_calendar_active .ajax__calendar_year {background-color:#edf9ff;border-color:#0066cc;color:#0066cc;}

.ajax_日历 .ajax_calendar_other .ajax__calendar_day {背景颜色:#ffffff;边框颜色:#ffffff;颜色:#646464;} .ajax_日历 .ajax_calendar_other .ajax__calendar_year {background-color:#ffffff;border-color:#ffffff;color:#646464;}

.ajax_日历 .ajax_calendar_hover .ajax__calendar_day {background-color:#edf9ff;border-color:#daf2fc;color:#0066cc;} .ajax_日历 .ajax_calendar_hover .ajax__calendar_month {background-color:#edf9ff;border-color:#daf2fc;color:#0066cc;} .ajax_日历 .ajax_calendar_hover .ajax__calendar_year {background-color:#edf9ff;border-color:#daf2fc;color:#0066cc;}

.ajax_日历 .ajax_calendar_hover .ajax__calendar_title {color:#0066cc;} .ajax_日历 .ajax_calendar_hover .ajax__calendar_today {color:#0066cc;}

使用这种 CSS 样式，我可以避免重叠，但是月份和年份不再足够大，并且不会填满整个屏幕。有没有人有这方面的经验？

Answer 1

我自己也有一个与此非常相似的问题，最终发现几乎更多的是破解而不是解决方案。但它工作得很好，不会给我带来任何问题：

由于我无法放大日历，因此我缩小了其他所有内容并更改了页面的缩放属性，以使用户开始放大到足以使日历足够大。

有关设置初始缩放的帮助，请参阅 Showing mobile friendly web page without having to zoom in。另外，我发现如果您使用日历，日历通常足够大（在我看来）

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

是的，您实际上输入了“device-width”，这将询问查看您页面的设备的宽度并使用它。